Pixel, Punkte, Pica und andere Längeneinheiten

(Auszug aus "XML in a Nutshell" von Elliotte Rusty Harold & W. Scott Means)

Viele CSS-Properties repräsentieren Längen. Einige der wichtigsten (wenn auch keineswegs alle) sind:

  • border-width
  • font-size
  • line-height
  • margin-left, margin-top, margin-right und margin-bottom
  • left
  • top
  • height
  • width

CSS bietet viele unterschiedliche Einheiten, um die Längen festlegen zu können. Diese werden in zwei Gruppen eingeteilt:

  • absolute Längeneinheiten wie Zoll, Zentimeter, Millimeter, Punkt und Pica
  • relative Einheiten wie em, ex, Pixel und Prozentwerte

Absolute Längeneinheiten eignen sich für gedruckte Medien (das ist Papier), sollten aber in anderen Medien vermieden werden. Für diese eignen sich die relativen Einheiten. Eine Ausnahme bilden Pixel, die man am besten überhaupt nicht benutzen sollte. Diese Style-Regel beispielsweise macht das Element gericht genau einen halben Zentimeter hoch:

gericht { height: 0.5 cm }

Allerdings sollten Dokumente, die für die Darstellung auf Bildschirmen wie etwa Fernsehgeräten und Computermonitoren gedacht sind, nicht mit festen Größen versehen werden. Zum einen kann die Größe eines Zolls oder einer anderen absoluten Einheit je nach der Auflösung des Monitors variieren. Außerdem verwenden nicht alle Benutzer die gleichen Vorgabewerte; das heißt, was auf einem Monitor gut aussieht, könnte auf einem anderen Gerät unleserlich sein. Stattdessen sollten Sie Einheiten verwenden, die sich relativ zu etwas verhalten, wie zum Beispiel ein em, das relativ zur Breite des Großbuchstabens M in der aktuellen Schriftart ist, oder ein ex, das relativ zur Höhe des kleinen x in der aktuellen Schriftart ist. Diese Regel beispielsweise setzt das Property line-height des Elements geschichte auf das Anderthalbfache der Höhe des x:

geschichte { line-height: 1.5ex }

Pixel ist ebenfalls eine relative Größeneinheit, allerdings verhält es sich relativ zur Größe eines Pixels auf der aktuellen Anzeige. Diese Größe bewegt sich im Allgemeinen in der Nähe eines Punkts, sie kann aber von System zu System unterschiedlich sein. Wir empfehlen Ihnen ganz allgemein, auf den Einsatz der Einheit Pixel zu verzichten, es sei denn, Sie müssen etwas anhand einer Bitmap-Grafik im genauen Verhältnis von 1:1 ausrichten. Webseiten, die mit Pixellängen formatiert wurden, sehen auf den Monitoren vieler Nutzer unweigerlich zu klein oder zu groß aus.

Eine andere sehr nützliche Technik ist das Festlegen von Längen als Prozentwerte anderer Längen. Anhand welcher Länge der Prozentwert berechnet wird, hängt von dem jeweiligen Property ab. Wurde zum Beispiel line-height als Prozentwert angegeben, erfolgte die Berechnung anhand des Properties font-height des gleichen Elements. Diese beiden Regeln setzen das Property font-height des Elements gericht auf 0,5 Zentimeter und das Property line-height des Elements gericht auf 0,75 Zentimeter:

gericht { font-height: 0.5cm }
gericht { line-height: 150%  }

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema XML bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

  


Copyright © 2005 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "XML in a Nutshell" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de