Pixelbreite eines Wortes (font-size:20px z.B) ermitteln?
guenter
- javascript
Hallo allerseits!
In einer Webseite soll z.B. das Wort "Auto" - sagen wir in "Verdana" und mit einer Größe von 20 px angezeigt werden. Fällt jemandem eine Möglichkeit ein zu eruieren, wie viele Pixel auf der X-Achse dieses Wort beim User einnehmen wird - entsprechend seinen individuellen Einstellungen? Hintergrund meiner Frage: es geht um buchgetreue Blocksatzdarstellung (erzwungener Blocksatz) von Texten in der größtmöglichen Schrift für sehbeeinträchtigte Menschen, OHNE von diesen eine Interaktion zu verlangen, denn wie das zu bewerkstelligen wäre, weiß ich schon.
Vorschläge sind im voraus sehr bedankt.
Günter
Hi,
In einer Webseite soll z.B. das Wort "Auto" - sagen wir in "Verdana" und mit einer Größe von 20 px angezeigt werden. Fällt jemandem eine Möglichkeit ein zu eruieren, wie viele Pixel auf der X-Achse dieses Wort beim User einnehmen wird - entsprechend seinen individuellen Einstellungen?
Du könntest ein Element erzeugen, dessen Breite sich nach dem Inhalt richtet, und sowohl Inhalt als auch effektive Stile (User-Stylesheets nicht vergessen) kopieren, und anschließend die Breite messen.
Hintergrund meiner Frage: es geht um buchgetreue Blocksatzdarstellung (erzwungener Blocksatz) von Texten
Blocksatz erhöht nicht gerade die Lesbarkeit von Texten. Aber wenn es schon sein muss, was spricht dann gegen text-align:justify?
Cheatah
Du könntest ein Element erzeugen, dessen Breite sich nach dem Inhalt richtet, und sowohl Inhalt als auch effektive Stile (User-Stylesheets nicht vergessen) kopieren, und anschließend die Breite messen.
...was meinst Du mit kopieren?
Blocksatz erhöht nicht gerade die Lesbarkeit von Texten. Aber wenn es schon sein muss, was spricht dann gegen text-align:justify?
...dagegen gar nichts, wird ja auch gemacht, aber der Umbruch soll nicht Browser wilkürlich, sondern der Buchvorlage entsprechend, erfolgen (durch erzwungenen Blocksatz). Die größtmögliche Schrift dient dann eben dazu, die Lesbarkeit des Textes im Blocksatz durch den kleinstmöglichen Wortabstand zu erhöhen.
Günter
Hallo,
Die größtmögliche Schrift dient dann eben dazu, die Lesbarkeit des Textes
im Blocksatz durch den kleinstmöglichen Wortabstand zu erhöhen.
das versteh ich hier nicht. Wenn ich ein "Wortbild" wie hier habe:
Das ist
wunderwunderschön,
aber ansonsten
doch blöd zu lesen.
Dann werden die Probleme des Blocksatzes (oben freilich nun etwas übertrieben) doch auch bei größerer Schrift bestehen bleiben. Es passen ja nicht mehr Worte in die "feste Breite". Entweder gar weniger, oder, wenn die Breite mitwächst, exakt genauso viel.
Äh, meine ich....
Chräcker
Oh, vergiss mein Posting - ist noch früh für mich heute - habs kapiert... Wir reden ja von einem "funktionierendem Blocksatz" einer Vorlage.
Fällt jemandem eine Möglichkeit ein zu eruieren, wie viele Pixel auf der X-Achse dieses Wort beim User einnehmen wird - entsprechend seinen individuellen Einstellungen?
Du packst das Wort in ein Inline-Element und misst per JavaScript dessen offsetWidth-Eigenschaft.
Hintergrund meiner Frage: es geht um buchgetreue Blocksatzdarstellung (erzwungener Blocksatz) von Texten in der größtmöglichen Schrift für sehbeeinträchtigte Menschen
Ich verstehe nicht, wie du dieses mit jenem erreichen willst. Was hat die Breite eines Wortes mit Blocksatz zu tun? Willst du ein Wort in einer vorgegebenen Breite anzeigen mit der größtmöglichen Schrift?
Mathias
»»Du packst das Wort in ein Inline-Element und misst per JavaScript dessen offsetWidth-Eigenschaft.
...danke, das leuchtet ein. Bis jetzt habe ich nur in Blockelementen "gedacht".
Ich verstehe nicht, wie du dieses mit jenem erreichen willst. Was hat die Breite eines Wortes mit Blocksatz zu tun? Willst du ein Wort in einer vorgegebenen Breite anzeigen mit der größtmöglichen Schrift?
..genau. Die Bildschirmbreite des sehbeeinträchtigten Users ist die Vorgabe, und diese Breite kann ich ermitteln. Wenn ich nun die längste Zeile des Buches (das original nachgebaut online gestellt werden soll, und zwar Punkt für Punkt und im Blocksatz) in ein Inline-Element stecken und abmessen kann, dann kann ich die größtmögliche Schrift für den User dynamisch ermitteln, so dass die Wortabstände nicht unschön groß werden.
Günter
Hi,
..genau. Die Bildschirmbreite des sehbeeinträchtigten Users ist die Vorgabe,
1. Die Bildschirmbreite ist vollkommen irrelevant. Wenn überhaupt, ist die Viewportgröße relevant.
2. Mit Deinem Verfahren stellst Du die Schrift in einer von _DIR_ vorgegebenen Größe dar. Ob der User die Schrift bei dieser Größe lesen kann, ist damit noch lange nicht gesagt.
Ein sehbeeinträchtigter User wird seinen Browser so konfiguriert haben, daß die Schrift in einer von ihm lesbaren Größe dargestellt wird. Sonst könnte er ja keine einzige Webseite lesen.
Warum willst Du ihm eine andere Größe vorgeben, die er dann ggf. nicht lesen kann?
cu,
Andreas
Hallo,
wie Andreas schon skizierte: gerade Seebehinderte haben ein großes Interesse daran, daß sie die Ausgabe auf ihre höchst individuellen Bedürfnissen hin verändern können.
Würde man gerade auf diese Individualisierung bei seinem Webangebot verzichten können, würde ich sagen: stell es doch als pdf in das Netz? Da können dann die seebehinderten es vergrößern bis nur noch ein Buchstabe auf dem Schirm passt, und der Umbruch stimmt immer noch.
Die vorteile eines pdf-s mit Javascript hier nachbauen, hielte ich für, sagen wir, gewagt...
Nur "vorlesen lassen" geht nicht mehr. (nehme ich an, kenne mich in dem bereich nicht mehr so aus....)
Chräcker
Hallo,
Nur "vorlesen lassen" geht nicht mehr. (nehme ich an, kenne mich in dem bereich nicht mehr so aus..)
Doch, das geht: einerseits den Text, so wie er dasteht (das kann Kauderwelsch werden, da die Lesereihenfolge nicht immer der inhaltlichen Reihenfolge unterliegt und Abbildungen etc. mit ausgegeben werden); der andere Weg ist die Auszeichnung des PDF-Dokumentes mit strukturierenden Tags (ähnlich HTML) - auf diese Weise kann man ein weitgehend barrierefreies PDF erzeugen.
Grüße Basti
Jetzt habe ich zumindest verstanden, was du vorhast. Du willst einen vorgegebenen Blocksatz an die Breite anpassen, indem du die Schriftgröße skalierst, ohne das ein Umbruch erfolgt - wie man es vom PDF-Zoom kennt.
Wie du das mit JavaScript hinbekommst, ist mir allerdings schleierhaft. Da hilft dir die Abfragen der Breite eines Wortes ja nicht. Du könntest höchstens jede Zeile in ein span packen und bei einer Schriftvergrößerung *alle* Zeilen prüfen, ob sie noch nicht umbrochen sind. Das wäre Performance-mäßig der Killer.
Ohnehin hat das nichts mit sehbeeinträchtigten Benutzern zu tun und du gehst fehl in dem Glauben, durch den fest zoomenden Blocksatz gerade diesen Nutzern einen Gefallen zu tun. Irgendwie hast du da auch falsch kalkuliert: Heutige Browser, und vor allem assistive Techniken von Sehbehinderten, machen entweder Full-Page-Zoom. Das heißt, wenn du einmal eine Konfiguration hast, in der der Blocksatz genau passt, dann kann der Benutzer frei skalieren und dein Blocksatz bleibt bestehen, bis eine Zeile länger als der Viewport wird. Oder jemand benutzt absichtlich einen Zoom, der dein Layout und also deinen Blocksatz kaputthaut, damit er für den Nutzer überhaupt zugänglich wird.
Insofern denke ich nicht, dass sich der Aufwand lohnt, diese Funktionalität mit JavaScript nachzubauen. Denjenigen, die es brauchen, hilfst du wenig damit, dass du ihren Bildschirm mit riesigen Buchstaben zukleisterst (»größtmögliche Schriftgröße«), nur damit das Buchlayout erhalten bleibt.
In so einem Fall würde ich eher
Mathias