Heim > Web-Frontend > CSS-Tutorial > Der Briefabstand ist gebrochen und es gibt nichts, was wir dagegen tun können ... vielleicht

Der Briefabstand ist gebrochen und es gibt nichts, was wir dagegen tun können ... vielleicht

Christopher Nolan
Freigeben: 2025-03-08 11:56:22
Original
982 Leute haben es durchsucht

Letter Spacing is Broken and There's Nothing We Can Do About It... Maybe

Dieser Artikel untersucht eine faszinierende Diskussion in der CSS Working Group (CSSWG) über die Eigenschaft letter-spacing. Ein hochrangiger Mozilla-Entwickler hob eine langjährige Diskrepanz zwischen der Art und Weise, wie Browser diese Immobilie und ihre tatsächliche CSS-Spezifikation erzeugen. Diese scheinbar einfache Eigenschaft zeigt überraschende Komplexität.

Das Kernproblem beruht darauf, wie Browser mit dem Abstand zwischen Zeichen umgehen. Während Menschen intuitiv den Buchstabenabstand verstehen, erfordern Computer eine definierte Strategie. Sollte der Raum vor, danach hinzugefügt oder gleichermaßen um jeden Buchstaben verteilt werden? Sollte sich dies zwischen links nach rechts (LTR) und RTL-Sprachen (rechts nach links) unterscheiden? Die ausgewählte Strategie wirkt sich erheblich auf die Textmessung und die Linienbrüche aus.

Derzeit weichen Browser -Implementierungen von der CSS -Spezifikation ab. Die Spezifikation beabsichtigt, dass der Abstand zwischen Zeichen auftritt, aber Browser fügen normalerweise Platz am -Sende jedes Zeichens hinzu. Diese Inkonsistenz besteht für verschiedene Rendering -Motoren wie Gecko (Firefox), Blink (Chrom usw.) und Webkit (Safari).

Die CSS -Spezifikation definiert

als: "Gibt den zusätzlichen Abstand zwischen typografischen Zeicheneinheiten an." Die gemeinsame Browser -Implementierung fügt jedoch am Ende jedes Charakters zusätzlichen Platz hinzu, was zu einem asymmetrischen Abstand führt, insbesondere in zentrierten Text- oder RTL -Sprachen. In RTL -Sprachen schafft die Diskrepanz zu Beginn des Textes eine Lücke. letter-spacing

Warum diese Diskrepanz? Das Ändern des etablierten Browserverhaltens würde aufgrund veränderter Textmessung und Zeilenunterbrechungen einen weitverbreiteten Website -Bruch riskieren. Websites haben möglicherweise bereits das aktuelle Verhalten durch Problemumgehungen kompensiert, was eine Änderung störte.

Zwei potenzielle Lösungen werden berücksichtigt:

Option 1: Verteilung der Speicherplätze: Die Spezifikation kann überarbeitet werden, um die gleiche Raumverteilung vor und nach jedem Zeichen zu erzwingen. Dies würde einen symmetrischen Abstand schaffen, aber dennoch das Risiko von Layoutänderungen birgt.

Option 2: Entwicklerkontrollierte Platzierung: Einführung einer neuen Eigenschaft (z. B. ), mit der Entwickler angeben können, wo der Abstand angewendet wird (letter-spacing-justify, before, after, left, right, between). Dies bietet Flexibilität, die Rückwärtskompatibilität aufrechterhalten und gleichzeitig eine verbesserte Abstandskontrolle für neue Projekte ermöglicht. around

Eine dritte Option, die den Status Quo beibehalten, ist angesichts der Verpflichtung des CSSWG für die Behandlung dieses Problems weniger wahrscheinlich. Das wahrscheinlichste Ergebnis scheint Option 2 zu sein, was Entwicklern eine bessere Kontrolle über letter-spacing Verhalten bietet. Die Reise in Richtung einer genaueren und konsequenten letter-spacing -implementierung dauert an, wodurch die Feinheiten der Web -Typografie hervorgehoben werden.

Das obige ist der detaillierte Inhalt vonDer Briefabstand ist gebrochen und es gibt nichts, was wir dagegen tun können ... vielleicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage