relative Schriftgrössen

[Martin Hein]

Hallo Forum,

ich versuche eine barrierefreie Seite zu bauen. Das ist tatsächlich
eine verdammt interessante Thematik. CSS-basiertes Layout ansich
ist schon total neu für mich, aber es geht und macht sogar Spass ;)

Jetzt steht für mich das Thema 'relative Schriftgrössen' an.
Geplant ist ein Font-Size-Switcher, wie man ihn kennt (a-|a|a+).
ich wüsste, wie ich das einfach umsetzte. nämlich einfach indem
ich ein weiters stylesheet lade, dass die Pixelgrössen bestimmter
Elemente überschreibt. Ich habe, wie gesagt, zuerst mal mit Pixel-
angaben gearbeitet, weil ich das gewohnt bin.

Jetzt kommt aber das Thema 'relative Schriftgrössen' und ich
würde gerne vorher wissen, was genau das macht. Bei Pixelangaben
funktioniert im IE Ansicht/Schriftgrad mich mehr. Mit em-Angaben
schon. Ok, aber ist die Default-Schriftgrösse an jedem Rechner
gleich ? Krieg ich also mit em ein Design Broserübergreifend
umgesetzt ?

Wie geht man sinnvoll an diese Sache ran ?

danke für eure Tipps und
beste Gruesse,

martin

[Gernot Back]

Hallo Martin,

Ich habe, wie gesagt, zuerst mal mit Pixel-
angaben gearbeitet, weil ich das gewohnt bin.

Dann gewöhn es dir ab. Formatiere alles in relativen Größen und gut is.

Gruß Gernot

[Martin Hein]

Hallo Gernot,

Dann gewöhn es dir ab. Formatiere alles in relativen Größen und gut is.

JAWOLL !

;) ich glaub nicht, dass das so einfach ist, wenn man das immer
gemacht hat. abgesehen hab ich natürlich immer den anspruch besser
zu werden, aber da stellt sich immer auch die frage nach dem budget
und der effziens.

gruesse,
martin

[Gernot Back]

Hallo Martin,

;) ich glaub nicht, dass das so einfach ist, wenn man das immer
gemacht hat.

Das mit den relativen Größen halte ich bei der barrierefreien Codierung noch für den geringsten Aufwand. Aufwändiger ist es, Tabellen (mit tatsächlich tabellarischen Daten versteht sich) für nicht-visuelle Ausgabemedien aufzubereiten.

Außerdem, was hast du bei den Schriftgrößen für eine Alternative? Willst du etwa in Pixeln definierte Schriftgrößen bei Knopfdruck auf einen Button mit Javascript stufenweise ändern? Das kannst du nicht allen Ernstes als "barrierefrei" ansehen.

Gruß Gernot

[Orlando]

Jetzt kommt aber das Thema 'relative Schriftgrössen' und ich
würde gerne vorher wissen, was genau das macht. Bei Pixelangaben
funktioniert im IE Ansicht/Schriftgrad mich mehr. Mit em-Angaben
schon. Ok, aber ist die Default-Schriftgrösse an jedem Rechner
gleich ?

Nein, aber das ist irrelevant, da die Proportionen erhalten bleiben. Lediglich Elemente mit Pixelgrößen (beispielsweise Bilder) skalieren teilweise nicht mit. Bei Hintergrundbildern empfiehlt es sich daher, einen „Puffer“ einzubauen, sie also etwas größer zu gestalten.

Krieg ich also mit em ein Design Broserübergreifend
umgesetzt ?

Ja.

Wie geht man sinnvoll an diese Sache ran ?

Alle Einheiten auf em oder % umstellen und während der Entwicklung stets mit allen Browsern testen.

Roland

[Gernot Back]

Hallo Orlando,

Nein, aber das ist irrelevant, da die Proportionen erhalten bleiben. Lediglich Elemente mit Pixelgrößen (beispielsweise Bilder) skalieren teilweise nicht mit.

Vordergrundbilder (IMG-Elemente) skalieren doch prima proportional mit, wenn man sie mit width:100% am Elternelement ausrichtet und man kann sie mit absoluter und relativer Positionierung in Kombination mit Z-Index auch in den Hintergrund setzen. Eigentlich gibt es doch gar kein Problem, aber wem sage ich das?

Na gut, Icons sehen ziemlich usselig aus, wenn man sie skaliert.

Gruß Gernot

[Jeena Paradies]

Hallo,

Alle Einheiten auf em oder % umstellen und während der Entwicklung stets mit allen Browsern testen.

Oder noch besser, mit dem Fx entwickeln, danach sich unglaublich freuen dass Opera, Safari und Konqueror ohne zusätzliche Anpassungen sich komplett genau so verhalten wie der Fx (zumindest zu 99%) und dann den IE aufs wüste beschimpfen weil da einfach die ganze Seite total kaputt ist (wobei der IE7 da schon einige fortschritte gemacht hat).

Jeena

[Der Martin]

Hallo,

Jetzt steht für mich das Thema 'relative Schriftgrössen' an.
Geplant ist ein Font-Size-Switcher, wie man ihn kennt (a-|a|a+).

warum - wo doch diese Funktion in nahezu jedem Browser schon realisiert ist? Okay, wenn's zu Lernzwecken sein soll ... aber sinnvoll finde ich es nicht.

Ok, aber ist die Default-Schriftgrösse an jedem Rechner gleich ? Krieg ich also mit em ein Design Broserübergreifend umgesetzt ?

Das kommt drauf an, was du erwartest. Versuche zunächst, dich von der Idee zu trennen, dass man "em" ohne weiteres in "px" umrechnen könnte. Im Grunde ist "1em" die im Browser eingestellte Standard-Schriftgröße. Die kann von Browser zu Browser, aber auch schon von Anwender zu Anwender bei demselben Browser unterschiedlich sein.

Wichtig ist also beim Layout, dass du kritisch überlegst, welche Maße sich an der Schriftgröße orientieren sollen, welche an der Fenstergröße, und wo man eventuell doch noch px-Angaben gutheißen kann.
Beispielsweise bietet es sich an, Abstände (padding, margin) von Textboxen in em, also relativ zur Schriftgröße anzugeben, Rahmenlinien oder grafische Elemente vielleicht doch eher in px. Wenn das Layout insgesamt flexibel ist, sollte es auch mit derart variablen Größenangaben klarkommen. Okay, manchmal stößt man auf die Unfäigkeit gewisser Browser, die z.B. nicht in der Lage sind, die Höhe eines positionierten Elements aus top und bottom zu bestimmen. Aber im Wesentlichen klappt das ganz gut, wenn man nicht auf eine festzementierte Anordnung der Elemente beharrt.

So long,
 Martin (der andere)

PS: Du plenkst.

[Martin Hein]

hello,

warum - wo doch diese Funktion in nahezu jedem Browser schon realisiert ist? Okay, wenn's zu Lernzwecken sein soll ... aber sinnvoll finde ich es nicht.

weil zum beispiel mein mutter davon nix weiss. wenn die auf
der seite allerdings so etwas findet, wird sie's benutzen.

Das kommt drauf an, was du erwartest. Versuche zunächst, dich von der Idee zu trennen, dass man "em" ohne weiteres in "px" umrechnen könnte. Im Grunde ist "1em" die im Browser eingestellte Standard-Schriftgröße. Die kann von Browser zu Browser, aber auch schon von Anwender zu Anwender bei demselben Browser unterschiedlich sein.

die idee hatte ich garnicht ;) dass diese einstellung theoretisch
überall anders sein kann, ist mir klar, sonst würde das ganze ja
auch keinen sinn ergeben. meine frage war ja die nach dem default.
und der ist doch wahrscheinlich auf allen win xp/ie6 identisch.
nun ist die frage, ob es bei mozilla und opera usw. sehr davon abweicht. es sieht nicht danach aus. nexte frage: apple ...

Wichtig ist also beim Layout, dass du kritisch überlegst, welche Maße sich an der Schriftgröße orientieren sollen, welche an der Fenstergröße, und wo man eventuell doch noch px-Angaben gutheißen kann.

ja, das macht sinn. weil ich die schriftgrössen-diskussion selbst
ein bisschen als ins adabsurdum geführt empfinde, werde ich da
auch nicht versuchen wollen, jeden fall abzufangen und auf meinen
mehr auf meinen style-switcher setzen.

PS: Du plenkst.

das hat du letzens schonmal behautet und ich hab's nicht verstanden ;)

gruesse,
martin

[Der Martin]

Moin lieber Namensvetter,

warum - wo doch diese Funktion in nahezu jedem Browser schon realisiert ist? Okay, wenn's zu Lernzwecken sein soll ... aber sinnvoll finde ich es nicht.
weil zum beispiel mein mutter davon nix weiss. wenn die auf der seite allerdings so etwas findet, wird sie's benutzen.

wenn du ihr zeigst, wie sie es im Browser einstellen kann, dann wird sie sich freuen, dass das plötzlich auf nahezu allen Seiten funktioniert!

Das kommt drauf an, was du erwartest. Versuche zunächst, dich von der Idee zu trennen, dass man "em" ohne weiteres in "px" umrechnen könnte. [...]
meine frage war ja die nach dem default.
und der ist doch wahrscheinlich auf allen win xp/ie6 identisch.

Nein. Schon der Defaultwert ist abhängig von der Grundeinstellung der System-Schriftgröße - und hier spielt sogar der Grafiktreiber mit hinein, diese System-Schriftgröße kann beim gleichen Grafiktreiber auch noch je nach Bildschirmauflösung unterschiedlich sein.

nun ist die frage, ob es bei mozilla und opera usw. sehr davon abweicht. es sieht nicht danach aus. nexte frage: apple ...

Bei mir sehen die Schriftgrößen (trotz Defaulteinstellung) im Firefox meistens deutlich kleiner aus als im IE und im Opera.

PS: Du plenkst.
das hat du letzens schonmal behautet und ich hab's nicht verstanden ;)

Dann hast du offensichtlich den verlinkten Wiki-Artikel nicht einmal gelesen. Schade eigentlich ...

Ciao,
 Martin

[Gernot Back]

Hallo Martin,

Rahmenlinien oder grafische Elemente vielleicht doch eher in px.

Das halte ich für keine gute Idee, relative und absolute Einheiten zu mischen; mit der Bündigkeit der Anordnung dieser Elemente ist es dann sehr schnell dahin. Eine 10em breite Box mit einer einen Pixel breiten Rahmenlinie drumherum ist nun mal nicht genauso breit wie zwei 5em breite Boxen mit einer einen Pixel breiten Rahmenlinie drumherum. Mit einer jeweils 0.1em breiten Rahmenlinie und Boxen von 4.8 bzw. 9.8em kommst du eher hin.

Gruß Gernot

[Jeena Paradies]

Hallo,

Das halte ich für keine gute Idee, relative und absolute Einheiten zu mischen; mit der Bündigkeit der Anordnung dieser Elemente ist es dann sehr schnell dahin. Eine 10em breite Box mit einer einen Pixel breiten Rahmenlinie drumherum ist nun mal nicht genauso breit wie zwei 5em breite Boxen mit einer einen Pixel breiten Rahmenlinie drumherum. Mit einer jeweils 0.1em breiten Rahmenlinie und Boxen von 4.8 bzw. 9.8em kommst du eher hin.

Dazu kommen noch die Rundungsfehler der Browser.

Jeena

[Der Martin]

Hallo Gernot,

Rahmenlinien oder grafische Elemente vielleicht doch eher in px.
Das halte ich für keine gute Idee, relative und absolute Einheiten zu mischen; mit der Bündigkeit der Anordnung dieser Elemente ist es dann sehr schnell dahin. Eine 10em breite Box mit einer einen Pixel breiten Rahmenlinie drumherum ist nun mal nicht genauso breit wie zwei 5em breite Boxen mit einer einen Pixel breiten Rahmenlinie drumherum. Mit einer jeweils 0.1em breiten Rahmenlinie und Boxen von 4.8 bzw. 9.8em kommst du eher hin.

solche Effekte sind mir schon klar - aber wir wissen doch mittlerweile, dass ein pixelgenaues Layout weder notwendig noch überhaupt erstrebenswert ist. Also richtet man Pufferzonen ein; Elemente, die keine feste Breite (Höhe) haben und daher solche Effekte ausgleichen, indem sie einfach "den Rest" bekommen. Oder variable Abstände.

Ciao,
 Martin

[wahsaga]

hi,

Jetzt steht für mich das Thema 'relative Schriftgrössen' an.

Zwei recht ausführliche Betrachtungen im SELFHTML Weblog:
http://aktuell.de.selfhtml.org/weblog/schriftgroesse
http://aktuell.de.selfhtml.org/weblog/schriftgroesse-lesbarkeit

Ok, aber ist die Default-Schriftgrösse an jedem Rechner gleich ?

Warum sollte sie das sein?

Krieg ich also mit em ein Design Broserübergreifend umgesetzt ?

Wenn du mit "browserübergreifend" in diesem Zusammenhang meinst, dass deine Schrift letztendlich wieder überall gleichgroß sein soll - dann willst du die Entscheidung darüber ja offenbar doch gar nicht an den Nutzer abgeben.

gruß,
wahsaga

[Martin Hein]

naja,

ich habe gelernt, die jpgs die der grafiker layout nennt,
so umzusetzen, dass sie (natürlich auch nur nahezu) auf
den browsern mit denen ich teste zu programmieren.

das habe ich nun gemacht und jetzt kommt das thema barriere-
freiheit. das heisst für mich, dass die seite immernoch auf
allen systemen genauso, wie auf dem layout aussehen soll,
nutzer, die irgendeine barriere im weg haben, sich die seite
mit den von ihnen verwendeten hilfsmitteln dahingehend
verändern können, dass sie ihren bedürfnissen entspricht,
möglichst ohne dass das layout ganz in die grütze geht.

was die verwendeten hilfsmittel sind, vermag ich bisher
noch nicht wirklich zu sagen. beim ie6 habe ich eben den
effekt mit dem schriftgrad entdeckt. das könnte so ein
hilfsmittel sein. eine javascriptgesteurte schriftenskallierung
ist auch so ein hilfsmittel, das den vorteil hat, dass ich alles
im griff habe, aber von dem ich nicht weiss, ob das jemand
benutzen wird.

ich selbst benutze opera, da hab ich das problem nicht ;)

gruss,
martin

[Struppi]

ich habe gelernt, die jpgs die der grafiker layout nennt,
so umzusetzen, dass sie (natürlich auch nur nahezu) auf
den browsern mit denen ich teste zu programmieren.

Das ist natürlich traurig, da dir damit Barrieren aufgebaut sind, die ein schönes HTML/CSS Design erschweren. Gerade mit dem von dir vorgetragenen Wunsch nach Barrierefreiheit ist so eine Umsetzung eines Papierlayouts zu einer Internetseite garantiert der falsche Weg.

Struppi.

[Cyx23]

Hallo,

funktioniert im IE Ansicht/Schriftgrad mich mehr. Mit em-Angaben
schon. Ok, aber ist die Default-Schriftgrösse an jedem Rechner
gleich ?

bei em als klassiche skalierbare Lösung ist es nicht unüblich, etwas
auf 0.8 em o.ä. zu reduzieren. Abgesehen von der Frage, wie sinnvoll
sowas gerade bei barrierefreien Seiten ist, immerhin zu bedenken.

Ansonsten ist mir nicht klar, wie nötig tatsächlich der immer
(natürlich nicht zu Unrecht) propagierte Verzicht auf Pixel heute
noch ist.
Opera, Mozilla skalieren Pixel nachträglich, und es gibt bei den
Explorern die Möglichkeit, wenn auch etwas holprig, per "Extras >
Internetoptionen > Eingabehilfen" den Schriftgard zu ignorieren. Und
ggf. sind wohl inzwischen bei allen Browsern Benutzerstylesheets
möglich.

Grüsse
Cyx23

[Martin Hein]

hi,

Ansonsten ist mir nicht klar, wie nötig tatsächlich der immer
(natürlich nicht zu Unrecht) propagierte Verzicht auf Pixel heute
noch ist.

sehe ich eigentlich genauso. jemand der nix sieht wird sicher nicht
drauf warten, dass ihm seine umwelt alles dirkt vor die nase hält,
sondern sich besser 'ne brille besorgen und sich so selbst helfen.
ist ja trotzdem nett, wenn man ihm hilfen anbietet, aber wahrscheinlich kann er sich viel besser selbst helfen ;)

geht halt um ne seite für ne krankenkasse. die konkurenz hat den
biene-award in gold und die haben schrott.

beste gruesse,
martin

[wahsaga]

hi,

jemand der nix sieht wird sicher nicht drauf warten, dass ihm seine umwelt alles dirkt vor die nase hält, sondern sich besser 'ne brille besorgen und sich so selbst helfen.

Wie störend genau diese "Arroganz" ist, hat molily in einem der von mir verlinkten Weblog-Einträge doch sehr gut zum Ausdruck gebracht.
Ja, man _kann_ sich jede Seite mit einigen Tastendrücken oder Mausklicks so einstellen, dass man auch von sogenannten "Designern" verbrochene Winzig-Schrift halbwegs lesen kann - aber _will_ man das immer wieder tun müssen? Ich für meinen Teil Nein.

geht halt um ne seite für ne krankenkasse.

Wer bezahlt mir die Brille, die ich mir nach deiner obigen Aussage holen soll? Die Krankenkasse.
Welche Krankenkasse wähle ich? Bestimmt nicht die, auf deren Seite ich ohne Brille nix lesen kann ...

gruß,
wahsaga

[Cyx23]

Hallo,

sondern sich besser 'ne brille besorgen und sich so selbst helfen.
ist ja trotzdem nett, wenn man ihm hilfen anbietet, aber wahrscheinlich kann er sich viel besser selbst helfen ;)

vielleicht, vielleicht auch nicht. Und die Pixelfrage halte ich nicht
für befriedigend beantwortet. Das bedeutet aber nicht, dass ich schon
deswegen Pixel empfehlen möchte.

Interessant mag eher die Feineinstellung der Schriftgrösse sein, als
ganz massive Sprünge zu ermöglichen.

Dabei geht es ja nicht nur um stark Sehbehinderte, sondern um ganz
"normale" Sehfehler bis hin zur ab 40 einsetzenden "Weitsichtigkeit".

geht halt um ne seite für ne krankenkasse. die konkurenz hat den
biene-award in gold und die haben schrott.

Dann sollte es doch gar kein Problem sein, die Seite besonders
barrierefrei und für alle Altersgruppen geeignet auszulegen, und
vorsorglich auch noch em zu verwenden?

Grüsse

Cyx23