searched again 2026-05-06
Woher kommt 1.7?
Suche nach der richtigen line-height für arabischen Webtext, und dieselbe Zahl kommt aus einem Dutzend Agenturbeiträge und Design-Blogs zurück: 1.7, manchmal 1.8, gelegentlich formuliert als das Anderthalbfache dessen, was du für Latein nimmst. Die Beiträge sind sich einig. Keiner ist sich mit einer Quelle einig.
Den Belegen zu folgen ist lehrreich. Die meisten verlinken auf einen weiteren Beitrag, der dieselbe Zahl und keine Quelle nennt. Mehrere zitieren einen Bericht, den es nicht gibt. Der Rest gibt die Zahl als selbstverständlich aus, und das ist für eine Schrift, deren vertikale Ausdehnung zwischen Schnitten stärker schwankt als beim Lateinischen, das Einzige, was sie nicht sein kann.
Das macht 1.7 nicht falsch. Für viele arabische Schnitte in Textgröße liegt es bequem über der Untergrenze, und deshalb ist damit nie jemand schlecht gefahren. Es macht die Zahl unwiderlegbar, und eine unwiderlegbare Zahl ist eine Zahl, die du nicht debuggen kannst, wenn deine Überschriften trotzdem kollidieren.
CSS Inline Layout, half-leading
Was wirklich kollidiert, sind Glyphen, keine Boxen
Eine Zeilenbox hat nicht dieselbe Form wie die Glyphen darin. Der Browser baut jede Zeile aus den Font-Metriken: dem Ascent über der Grundlinie, dem Descent darunter und dem Abstand zwischen dieser Summe und der line-height, der gleichmäßig oben und unten als Half-Leading verteilt wird. Ist die line-height kleiner als die Content-Box der Schrift, wird das Half-Leading negativ und die Glyphen laufen in beide Richtungen aus ihrer eigenen Zeilenbox heraus.
Deshalb kann ein arabischer Absatz gut aussehen und eine arabische Überschrift beim selben Verhältnis trotzdem kollidieren. Der Absatz steht in einer Größe, in der Ascent und Descent absolut gesehen klein sind; die Überschrift nicht. Und deshalb muss die Frage in em an Glyphenausdehnung gestellt werden statt in Vielfachen der Schriftgröße.
Arabisch macht den Abstand zwischen Box und Glyphe größer als Latein, aus einem bestimmten Grund: den Zusatzzeichen. Ein Yeh in Endform trägt zwei Punkte, die fast ein halbes em unter der Grundlinie hängen, und ein Alif mit Hamza trägt ein Zeichen, das deutlich über dem einfachen Alif sitzt. Keins von beiden ist ein Ausreißer, beides sind gewöhnliche Buchstaben in gewöhnlichen Wörtern.
- Ascent
- Wie weit die höchste Glyphe einer Zeile über die Grundlinie reicht, als Bruchteil des em. In Zain schwankt das zwischen 0.716 für ein einfaches Alif und 1.024 für eines mit Hamza.
- Descent
- Wie weit die tiefste Glyphe darunter reicht. Die Punkte unter einem Yeh in Endform und die Schale eines Ain in Endform sind die üblichen Kandidaten.
- size-adjust
- Ein Faktor, der auf den gesamten Font angewendet wird, einschließlich seiner Metriken. Eine davor berechnete Untergrenze ist um genau diesen Faktor falsch.
fontTools 4.x, five minutes
So berechnest du die Untergrenze für deinen eigenen Text
Die Methode ist kurz genug, um sie einmal pro Schnitt laufen zu lassen und dann zu vergessen. Sie braucht die Fontdatei, die Strings, die du auslieferst, und einen Weg, Glyph-Bounding-Boxen zu lesen — fontTools ist der übliche.
from fontTools.ttLib import TTFont
font = TTFont(path)
upem = font[head].unitsPerEm
glyf = font[glyf]
cmap = font.getBestCmap()
def extent(text):
lo, hi = 0, 0
for ch in text:
g = glyf[cmap[ord(ch)]]
if g.numberOfContours == 0: continue
lo = min(lo, g.yMin); hi = max(hi, g.yMax)
return lo / upem, hi / upem
# Untergrenze für einen Umbruch = |Descent der oberen Zeile| + Ascent der unteren
floor = abs(extent(upper)[0]) + extent(lower)[1]
- Die Strings auflisten, auf die es ankommt Nicht deinen gesamten Inhalt. Die Display-Strings: Überschriften, Impact-Zeilen, alles, was groß genug gesetzt ist, dass eine Kollision sichtbar wäre. Fließtext in Textgröße ist fast nie der bindende Fall.
- Die Umbrüche durchzählen Für jeden String jede Wortgrenze, an der er brechen könnte. Eine Überschrift aus drei Wörtern hat zwei. Jeder Umbruch liefert dir eine obere und eine untere Zeile.
- Die beiden Extreme messen Für die obere Zeile das tiefste yMin über ihre Glyphen. Für die untere das höchste yMax. Beides als Bruchteil von unitsPerEm.
- Sie addieren Die Untergrenze für diesen Umbruch ist der Betrag des Descent der oberen Zeile plus der Ascent der unteren. Unter dieser Zahl teilen sich die beiden Zeilen Pixel.
- size-adjust anwenden Multipliziere mit dem size-adjust, mit dem der Schnitt deklariert ist. Die Spezifikation wendet die Anpassung auf die Font-Metriken an, die Glyphen wandern also mit.
- Das Maximum nehmen, dann Luft dazugeben Der schlechteste Umbruch über alle deine Strings ist die Untergrenze. Liefere mit einem Abstand darüber aus, den du bewusst wählst, statt mit einem Verhältnis, das du geerbt hast.
Zwei Details geht man leicht falsch an. Überspringe Glyphen ohne Konturen, sonst zieht ein Leerzeichen deinen Descent auf null und versteckt die Kollision. Und miss die zusammengesetzte Form: im Arabischen sind die Punkte und das Hamza eigene Komponenten, die erst beim Rendern zusammengebaut werden, und ein naiver Lookup, der sie verfehlt, erzählt dir, ein Alif mit Hamza sei so hoch wie ein einfaches.
Zain, size-adjust 112% and 103%
Die vier Strings, die die Zahl auf dieser Seite festlegen
Diese Seite veröffentlicht vier arabische Display-Strings, die umbrechen können. Die Messung über alle vier, an jeder Wortgrenze, an der sie brechen können, ergab vier Untergrenzen und eine Entscheidung.
| String | Wo er auftaucht | Berechnete Untergrenze |
|---|---|---|
| دائمًا | أستكشف الفكرة التالية | die Aussage im Footer | 1.3944 |
| مشاريع | مختارة | die Projekte-Überschrift | 1.2952 |
| خمس | دورات شهادة واحدة | der Zertifikatsabschnitt | 1.2412 |
| لغات | & تقنيات | das Technik-Raster | 1.1549 |
Ausgeliefert wird 1.45. Der Wert hält zur schlechtesten der vier 5.6 Prozent eines em Abstand, genug, dass ein Font-Update mit leicht anderen Metriken nicht sofort zur Kollision wird, und klein genug, dass arabische Überschriften nicht auseinanderfallen.
Sieh dir an, wie weit die vier auseinanderliegen. Zwischen dem engsten und dem weitesten String liegen 0.24 em, mehr als der Abstand zwischen 1.45 und jedem Verhältnis aus den Ratgebern. Eine Zahl, die für den Durchschnitt deiner Inhalte gewählt ist, ist eine Zahl, die für deren Extreme falsch ist.
measured on the Zain outlines
Warum der bindende Fall ein Alif mit Hamza ist
Der Footer-String gewinnt mit 0.10 em Vorsprung vor dem nächstschlechteren, und er gewinnt wegen eines Buchstabens. Seine zweite Zeile beginnt mit einem Alif, das ein Hamza trägt, und dieses Zeichen ändert die Rechnung. Die beiden Formen stehen unten in derselben Größe nebeneinander.
- 0.716 plain alef ا die gewöhnliche Senkrechte
- 1.024 hamza-bearing alef أ das Zeichen verlässt die em-Box
- +43% der Unterschied ein Diakritikum, über die ganze Zeile
Ein Display-Satz, der eines davon in eine zweite Zeile setzen kann, legt die Zahl fest. Das ist eine Tatsache über den Inhalt, keine über die Typografie, und deshalb muss die Messung über deine Strings laufen und nicht über das Alphabet. Eine Seite, deren arabische Überschriften zufällig nie vor einem Alif mit Hamza brechen, hat wirklich eine niedrigere Untergrenze und darf sie nutzen.
four roles, four values
Eine Zahl kann nicht Fließtext und Display zugleich bedienen
Die Untergrenze beantwortet, wann Glyphen kollidieren. Sie beantwortet nicht, was sich angenehm liest, und das sind verschiedene Fragen mit verschiedenen Antworten für verschiedene Rollen. Diese Seite landet bei vier arabischen line-heights, und jede hat ihren eigenen Grund.
Fließtext bekommt 1.8, weil er in langen Zeilen gelesen wird und der Rücksprung Platz braucht, nicht weil bei 1.5 etwas kollidieren würde. Labels bekommen 1.55, weil sie klein sind, nah an Versalien liegen und in einem Clip-Fenster sitzen, das ihre Unterlängen freihalten muss. Display bekommt die gemessenen 1.45. Und ein Abschnitt bekommt 1.25, aus einem Grund, der einen eigenen Absatz verdient.
Die line-height der Labels oben wird von einem Clip-Fenster bestimmt und nicht von einer Kollision, und dieses Fenster hat seine eigene Geschichte — die Spiegelung, die neben der Grundlinie landet.
measured at 130.5px, intended 112.5
Die Ausnahme: eine Überschrift, die nicht umbrechen kann
Ein Abschnitt dieser Seite stapelt zwei einwortige Überschriften, jede ein einzelnes Wort über einem einzelnen Wort. Keine kann umbrechen, die einzige mögliche Kollision sind also die Unterlängen des ersten Elements gegen die Oberlängen des zweiten, und beide sind bekannte Glyphen statt eines Raums von Möglichkeiten.
Gemessen über die Zain-Schnitte, die diese beiden Elemente wählen: ein Descent von 0.4262 em und ein Ascent von 0.7158 em, macht eine Untergrenze von 1.1420. Ausgeliefert wird 1.25, was 10.8 Prozent eines em Abstand hält und den arabischen Block bei 1.440 von 391 Pixeln auf 337 bringt, gegen die lateinischen 247.
html[lang='ar'] .otot-home-text-w :is(h1, h2, h3) {
line-height: 1.25;
}
- الجانب / البرمجي
- Die Code-Hälfte des Diptychons. Descent 0.4262 em auf dem oberen Wort, Ascent 0.7158 em auf dem unteren, macht eine Untergrenze von 1.1420.
- الجانب / التصميمي
- Die Design-Hälfte. Das obere Wort ist dasselbe, das untere ist vertikal kürzer, dieses Paar ist also nicht der bindende Fall.
Sie stand zuerst in der Section-Datei und wurde mit 130.5 Pixeln gerendert, wo 112.5 gewollt waren, weil die pauschale Regel für Display-Überschriften im Locale-Stylesheet in einem späteren Layer stand und gewann. So wurde die Regel gefunden, und deshalb steht sie jetzt neben der Zahl, zu der sie die Ausnahme ist.
Dasselbe Argument über Cascade Layer entscheidet mehrere weitere arabische Korrekturen auf dieser Seite, siehe die sieben Rechts-nach-links-Fehler, die logische Eigenschaften nicht beheben.
a checklist, not a ratio
Was du auf deiner eigenen Seite tun solltest
Wenn du eine Sache aus der Rechnung oben mitnimmst, dann die Form der Frage und keine der Zahlen. Meine sind Zain bei zwei size-adjust-Werten über vier bestimmte Strings; deine werden ein anderer Schnitt über andere Wörter sein, und die Untergrenze wird woanders landen.
- Messen, bevor du wählst
- Lass die Extents einmal über deine eigenen Display-Strings laufen. Das dauert Minuten und ersetzt eine Zahl, die niemand verteidigen kann, durch eine, die du verteidigen kannst.
- Erst nach size-adjust rechnen
- Wenn du eine arabische Schrift per size-adjust an eine lateinische angleichst, wandern die Glyphen mit der Anpassung. Berechne die Untergrenze beim ausgelieferten Wert, nicht bei 100 Prozent.
- Display von Fließtext trennen
- Beide werden in verschiedenen Größen gelesen und kollidieren bei verschiedenen Werten. Zwei Werte sind keine Unentschlossenheit, sondern zwei Antworten auf zwei Fragen.
- Auf die Clip-Fenster achten
- Jeder Effekt, der ein Label beschneidet, ob Roll, Maske oder Box mit fester Höhe, hat sein eigenes Verhältnis zu den Unterlängen, und die Zeilenbox zu öffnen, ohne den Clip mitzubewegen, ist der Weg, einem Yeh in Endform die Punkte abzuschneiden.
- Nie die Laufweite verändern
- Hat mit line-height nichts zu tun und gehört im selben Atemzug gesagt: Laufweite zieht eine verbundene Schrift auseinander. Es ist die eine pauschale Überschreibung, die sich seitenweit lohnt.
Das Problem mit den Clip-Fenstern hat einen eigenen Text, denn dort wird aus einer falschen line-height ein falscher Buchstabe: eine arabische Schrift skalieren, wenn die x-Höhe nichts bedeutet.
Wenn du für eine zweisprachige Seite eine arabische Schrift auswählst, ist die metrische Hälfte dieser Frage die Messung an Zahn und Alif.
