text-rendering

Zusammenfassung

Die text-rendering CSS-Eigenschaft liefert Informationen über die Prioritäten des Renderns von Text an die Rendering-Engine. Der Browser nutzt einen Kompromiss aus Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Text-rendering ist eine SVG-Eigenschaft, welche in keinem CSS-Standard definiert ist, jedoch lässt sie sich in Gecko- und WebKit-Browser unter Windows, Mac OS X und Linux auf HTML- und XML-Inhalte anwenden.

Einen deutlich sichtbaren Effekt erzielt optimizeLegibility, welches Ligaturen (ff, fi, fl, etc.) in einigen Fonts mit weniger als 20px ermöglicht (z.B. Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu-Font-Familie).

• Standardwert auto
• Gilt für Text-Elemente
• Vererbt yes
• Media visual
• Berechneter Wert ?

Syntax

Formale Grammatik:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision

text-rendering: inherit

Werte

auto

Der Browser entscheidet über Geschwindigkeits-, Lesbarkeits- und geometrische Präzisionsoptimierung während der Text gezeichnet wird. Die Unterschiede, wie der Browser die Werte interpretiert, stehen in der Kompatibilitätstabelle.

optimizeSpeed

Der Browser bevorzugt bei der Textdarstellung die Rendergeschwindigkeit vor der Lesbarkeit und geometrischer Präzision. Kerning und Ligaturen werden deaktiviert.

optimizeLegibility

Der Browser bevorzugt Lesbarkeit vor Rendergeschwindigkeit und geometrischer Präzision. Dabei werden Kerning und optional Ligaturen aktiviert.

geometricPrecision

Der Browser bevorzugt geometrische Präzision vor Rendergeschwindigkeit und Lesbarkeit. Spezielle Aspekte der Fonts — beispielweise Kerning — werden nicht linear skaliert; geometricPrecision kann Texte solcher Fonts besser aussehen lassen.

Wird in SVG ein Text größer oder kleiner skaliert, berechnet der Browser die endgültige Größe des Texts (welche durch die Font-Size mit angewandter Skalierung spezifiziert ist) und verlangt einen Font dieser Größe vom Fontsystem der Plattform. Wird jedoch eine Font-Size von, sagen wir, 9 mit Skalierung auf 140% verlangt, exisitiert die resultierende Font-Size von 12.6 nicht explizit im Fontsystem. Folglich rundet der Browser stattdessen die Font-Size auf 12, mit dem Ergebnis einer Treppenstufenskalierung des Texts.

Allerdings lässt sich der Text durch die geometricPrecision-Eigenschaft — sofern sie von der Render-Engine vollständig unterstützt wird — flüssig skalieren. Für große Skalierungsfaktoren ist das Ergebnis zwar weniger schön, dafür ist jedoch die Größe exakt so groß wie erwartet — weder auf- noch abgerundet zur nächstgelegenen Font-Size von Windows oder Linux.

WebKit verwendet präzise den spezifizierten Wert, Gecko hingegen behandelt den Wert wie optimizeLegibility.

Beispiele

/* Stelle sicher, dass alle Fonts im HTML-Dokument in ihrer ganzen
   Pracht dargestellt sind, aber vermeide inadequate Ligaturen in
   Elementen der Klasse foo */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }

Live-Beispiele

Gecko-Notizen

Der 20px Schwellwert des keyword-Schlüsselworts kann durch Änderung der browser.display.auto_quality_min_font_size-Voreinstellung geändert werden.

Die -Option hat keinen Effekt in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), weil der Standardcode für das Textrendering bereits enorm schnell ist und derzeit keine schnellere Codealternative vorhanden ist. Siehe Bug 595688 für Details.

Spezifikationen

Dies ist eine SVG-Eigenschaft, welche in keinem CSS-Standard definiert ist. Gecko (Firefox) und WebKit wenden text-rendering weiterhin auf HTML- und XML-Inhalte an.

Browserkompatibilität

Siehe auch

• Text-related properties: letter-spacing, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-rendering, text-shadow, text-transform, text-indent, white-space, word-spacing