text-rendering

Übersicht

Die text-rendering CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.

Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die text-rendering Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.

Ein offensichtlicher Effekt ist optimizeLegibility, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu Schriftfamilie).

Initialwert	`auto`
Anwendbar auf	Textelemente
Vererbt	Ja
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Globale Werte */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

Werte

auto

Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.

optimizeSpeed

Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.

optimizeLegibility

Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.

geometricPrecision

Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.

Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.

Der geometricPrecision Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.

Hinweis: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie optimizeLegibility.

Formale Syntax

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Beispiele

/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden,
   aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */

body {
  text-rendering: optimizeLegibility;
}

.foo {
  text-rendering: optimizeSpeed;
}

Livebeispiele

CSS Code	Unterschneidung	Ligaturen
font: 19.9px 'DejaVu Serif', Constantia;	LYoWAT	ff fi fl ffl
font: 20px 'DejaVu Serif', Constantia;	LYoWAT	ff fi fl ffl
font: 3em 'DejaVu Serif', Constantia; text-rendering: optimizeSpeed;	LYoWAT	ff fi fl ffl
font: 3em 'Dejavu Serif', Constantia; text-rendering: optimizeLegibility;	LYoWAT	ff fi fl ffl

Spezifikationen

Spezifikation	Status	Kommentar
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Die Definition von 'text-rendering' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Grundlegende Unterstützung für Windows und Linux	4.0^[1]	3.0^[2]	Nicht unterstützt	Nicht unterstützt	5.0 (532.5)
Grundlegende Unterstützung für andere Betriebssysteme	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`auto`	(Ja)^[3]	(Ja)^[4]	Nicht unterstützt	Nicht unterstützt	(Ja)^[3]
`geometricPrecision`	13^[5]	(Ja)^[6]	Nicht unterstützt	Nicht unterstützt	?

Merkmal	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?
`auto`	?	?	?	?	?
`geometricPrecision`	?	?	?	?	?

[1] Die Implementierung hat bekannte Fehler unter Windows und Linux, welche Schriftersetzung, Kapitälchen, Zeichenabstand stören oder überlappenden Text verursachen.

[2] Der optimizeSpeed Wert hat keinen Effekt in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), weil der Standardcode für die Textdarstellung bereits sehr schnell ist und aktuell kein schnellerer Codepfad existiert. Siehe Bug 595688 für Details.

[3] Chrome und Safari behandeln dies wie optimizeSpeed. Die Arbeit geht in WebKit Bug 41363 weiter.

[4] Falls die Schriftgröße 20 Pixel oder größer ist, verwenden Gecko Browser optimizeLegibility; für kleineren Text verwenden sie optimizeSpeed. Der 20 Pixel Grenzwert des auto Schlüsselworts kann über die browser.display.auto_quality_min_font_size Einstellung geändert werden.

[5] Unterstützt echte geometrische Präzision ohne auf die nächstmögliche Schriftgröße im Betriebssystem auf- oder abzurunden. Eingeführt in WebKit 535.1 WebKit Bug 60317.

[6] Gecko behandelt den Wert genauso wie optimizeLegibility.