grid mit image

[Rolf B]

Hallo Fred,

Die SVG finde ich nicht so prickelnd, zumal sie nicht linksbündig sind.

Bündigkeit ist etwas, was man einstellen kann. Kommt halt drauf an, wie Du es haben willst.

Wenn Du Bündigkeit innerhalb des SVG steuern willst - dann setze für den Text x auf 0 und text-anchor auf start. Feddich.

Wie sich das SVG-Element dann in seinen jeweiligen HTML Container ausrichtet, steuerst Du mit text-align auf diesem Container.

Gegen das PNG spricht eigentlich nur, dass ein SVG viel kleiner ist und sich auch als inline-SVG darstellen lässt.

Gegen jegliche Grafik spricht, dass Du schlecht ein Minimum für die Schriftgröße festlegen kannst. Das ist eine Frage der Lesbarkeit = Zugänglichkeit der Seite. Das ist der Vorteil der Textversion, wird eine Mindestgröße der Schrift unterschritten, bricht der Text im Zweifelsfalle um. Das geht weder mit PNG noch SVG.

Gunnars Lösung hat den Vorteil, dass sie sich automatisch an den Font anpasst, weil sie die Breite der Schrift bei font-size:1em ausmisst und dann einfach per Dreisatz das Verhältnis von realer Größe zu Normgröße in em umrechnet.

Das setzt aber eine bestimmte Eigenschaft des Fonts voraus. Denn font-size definiert die Schrifthöhe, nicht die Schriftbreite. Gunnar rechnet aber das Breitenverhältnis in einen Skalierungsfaktor für die font-size um. Eine Schriftart, deren Breite nicht proportional zur Höhe skaliert, funktioniert für diese Logik nicht. Ich weiß nicht, ob es solche Schriften gibt.

Rolf