Websiteentwicklung: CSS: numerische Angabe
Bei CSS bestehen Werte oft aus Zahlen, oft zusammen mit Maßeinheiten verwendet. Bei der jeweiligen Eigenschaft ist dann angegeben, wie der Wert genau konstruiert ist und welche Einheiten zulässig sind und welche Bedeutung spezielle Angaben für die Darstellung der Eigenschaft haben.
Die Werte vieler Eigenschaften haben allerdings die gleiche Notation und Bedeutung, lediglich die Auswirkung auf die Darstellung hängt von der jeweiligen Eigenschaft ab. Daher sind solch immer wiederkehrenden Notationen einheitlich definiert.
Zahlen
BearbeitenZahlen können in CSS sowohl ganze Zahlen sein als auch numerische Darstellungen von reellen Zahlen. Es wird in jedem Falle eine dezimale Darstellung verwendet.
Eine ganze Zahl besteht aus einer oder mehr Ziffern '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'. Eine Zahl ist entweder eine ganze Zahl oder die numerische Darstellung besteht aus keiner oder mehr Ziffern, gefolgt von einem Punkt '.', gefolgt von einer oder mehr Ziffern.
Optional kann einer Zahl oder ganzen Zahl auch noch ein Vorzeichen vorangestellt werden, '-' für negative Zahlen, '+' für positive Zahlen. '-0' ist gleich '0' und keine negative Zahl.
Bei der jeweiligen Eigenschaft kann jeweils angegeben sein, auf welchen Bereich von Zahlen ein gültiger Wert eingeschränkt wird. Oft sind das nicht negative Werte.
Längen
BearbeitenOftmals sind die Werte Längen, also meßbare Ausdehnungen oder Distanzen. Der Wert einer Länge besteht aus einer Zahl, direkt gefolgt von einer Einheit. Lediglich bei der Länge 0 ist die Angabe einer Einheit optional, weil der Wert unabhängig von der Einheit derselbe ist.
Wird ein negativer Wert notiert, wo negative Längen nicht erlaubt sind, wird die ganze Deklaration ignoriert.
Bei Längen unterscheidet man zwischen relativen und absoluten Werten. Die wichtigsten Angaben und deren Abkürzungen sind unten in Tabellen zusammengefasst worden. Mit relativen Angaben ist es einfacher, eine Stilvorlage flexibel zu skalieren.
Relative Längen
Bearbeiten| Abkürzung | Beschreibung | Beispiel |
|---|---|---|
| em | em bezieht sich auf die Schriftgröße des Elementes. 1em ist die Geviertgröße, ein typisches Maß für einen Glyphen, sofern vorhanden oft gut repräsentiert durch die Breite des Großbuchstabens M. | font-size: 1.5em; |
| ex | ex ist eine Größe, die für eine Schriftart genau relativ zur Schriftgröße festliegt. Schriftartendateien sollten eine genaue Angabe enthalten. Oft wird die Größe gut repräsentiert durch die Höhe eines kleinen Buschstabens 'x' oder 'o', sofern in der Schriftart vorhanden. Ist die Größe nicht in der Schriftart definiert und nicht anhand solcher Buchstaben abschätzbar, ist oft 0.5em eine brauchbare Schätzung für ex. | font-size: 2ex; |
| % | Prozent ist eine Angabe je nach CSS-Eigenschaft relativ zur elementeigenen Größe (oder des Elternelementes) oder zu einem allgemeinen Kontext. Der Bezug ist bei der jeweiligen Eigenschaft angegeben. | padding-top: 2%; width: 10%; |
Absolute Längen
BearbeitenLeider widerspricht hier die Spezifikation CSS 2.1 den Spezifikationen CSS 1.0 und CSS 2.0, daher sind absolute Längen formal undefiniert und in der Praxis unzuverlässig - die durch CSS 2.1 eingeführte Unzuverlässigkeit charakterisiert allerdings das unzuverlässige Verhalten von gängigen Darstellungsprogrammen besser als eine formal korrekte Verwendung der Einheiten, deren Bedeutung natürlich anderweitig von qualifizierteren Organisationen festgelegt ist als von einer Arbeitsgruppe des W3C.
Als zusätzliches Problem enthält die Spezifikation CSS2.1 sich widersprechende Passagen, was in der Praxis dazu geführt hat, dass auch Darstellungsprogramme, die in der Lage waren, absolute Längen gemäß CSS 1.0 und CSS 2.0 größtenteils korrekt darzustellen, bei neueren Versionen ebenfalls falsche Ergebnisse liefern (etwa konnten frühere Versionen von Mozilla/Gecko Einheiten wie Zentimeter, Millimeter, inch korrekt darstellen, aktuelle Versionen nicht mehr).
Definitionen gemäß CSS 1.0 und CSS 2.0:
| Abkürzung | Beschreibung | Beispiel |
|---|---|---|
| mm | Millimeter ist ein Längenmaß nach internationalem Standard, entspricht einem tausendstel Meter, wobei Meter wiederum über die Konstanz der Vakuum-Lichtgeschwindigkeit auf eine Zeitmessung oder eine Frequenzmessung zurückgeführt wird. | margin-right: 10mm; height: 20mm; |
| cm | Zentimeter: 1 cm sind 10 mm oder ein hundertstel Meter. | margin-top: 1cm; padding-left: 0.6cm; |
| in | Inch oder Zoll, 1 in sind 25.4 mm | padding-top: 1in; width: 10in; |
| pt | Punkt ist eine typographische Maßeinheit. 1 Punkt entspricht 1/72 inches oder 25.4 mm/72. | font-size: 10pt; |
| pc | Pica ist ein typographisches Maß. 1 Pica entspricht 12 Punkt oder 1in/6 oder 25.4 mm/6. | font-size: 1pc; |
Pixel
BearbeitenDie Einheit px steht für Pixel und ist ein Maß, welches von der Auflösung des Ausgabegerätes abhängt, je nach Standpunkt also relativ oder absolut ist.
Sofern das Ausgabegerät eine Auflösung um 90dpi (Punkte pro inch) hat (gemäß CSS 1.0 und CSS 2.0), entspricht der Pixel einem Pixel des Ausgabegerätes. Weicht die Auflösung deutlich von 90dpi ab, so sollte der Pixel umskaliert werden. Die Spezifikationen geben aber nicht genau an, ab wann und ob dabei interpoliert werden soll oder ob nur auf ganze Pixel verkleinert oder auf mehrere ganze Pixel vergrößert werden soll.
CSS 2.1 gibt statt 90dpi dann 96dpi an, was noch keinen großen Unterschied macht, weil ohnehin nirgends festgelegt ist, wann die Umskalierung stattfinden soll.
Längenwirrwar in CSS 2.1
BearbeitenDie eigentlichen Probleme in CSS 2.1 fangen nun damit an, dass außerdem festgelegt wird, dass 1px = 0.75pt ist, also 25.4mm/96. Gleichzeitig wird aber an der Skalierungsregel festgehalten. Beides aber geht nicht.
Weil damit nun aber der Pixel an die absoluten Einheiten gekoppelt ist, sind die Autoren der Spezifikation leider (trotz Hinweis auf das Problem) dem Irrtum unterlegen, dass es damit auch möglich sei, die anderen absoluten Einheiten relativ zur Größe eines Pixels auf dem Anzeigegerät zu bestimmen. Da aber die allermeisten Geräte nicht über eine Auflösung von 96dpi verfügen (typisch sind Auflösungen im Bereich von 300dpi bis 600dpi für Drucker und 70dpi bis 140dpi für Bildschirme, für Projektoren meist deutlich geringere Auflösungen bezogen auf das projizierte Bild), ergeben sich so unsinnige Anzeigen für Längenangaben gemäß internationalem Standard.
Die meisten Darstellungsprogramme für Bildschirme folgen diesem Irrtum, weil es viel einfacher ist, ausgehend von Pixeln mit festgelegten Umrechnungsfaktoren zu rechnen, statt die Auflösung korrekt zu berücksichtigen. Zudem wäre es bei Pixelgraphik meist suboptimal, die Pixel auf nicht ganzzahlige Werte zu skalieren. Bei der Vorbereitung von Druckausgaben kann sich der Fehler dann bis in die Druckausgabe fortsetzen, obgleich bei Druckern eigentlich immer recht präzise bekannt oder einstellbar ist, mit welcher Auflösung gedruckt wird.
Daraus ergibt sich dann letztlich für Autoren von Stilvorlagen, dass absolute Längenangaben in CSS in der Praxis unbrauchbar sind und Angaben in Pixeln mit Vorsicht zu verwenden sind - auch hier kann man sich nicht auf eine definierte Anzeige verlassen, schon weil die Empfehlungen zueinander widersprüchlich sind.