Skalierung und Textumbruch

[TS]

Hello Wissende,

ich brauch mal einen Tipp, wie ich es anstellen muss, damit ein Text beim Zoomen (in einem Tablet-Viewport) nicht den Viewport verlässt, sondern immer passend umgebrochen wird?

Das soll ohne JS erreicht werden. Geht das nur mit html und css?

Der Text soll also nur dann umgebrochen werden, wenn man nach dem Zoomen sonst seitlich scrollen müsste, um ihn vollständig lesen zu können. Wenn er von vorneherein schmaler ist, soll das auch so bleiben

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

warum ohne Javascript?

Ich hätte nur eine Idee, wie es mit JS gehen könnte. Aber vielleicht kommt ja noch jemand mit einer JS-freien Idee.

Gruß
Jürgen

[ursus contionabundo]

ich brauch mal einen Tipp, wie ich es anstellen muss, damit ein Text beim Zoomen (in einem Tablet-Viewport) nicht den Viewport verlässt, sondern immer passend umgebrochen wird?

Das soll ohne JS erreicht werden. Geht das nur mit html und css?

Klar! Einfach auf Browsermenü (oft "Drei Punkte senkrecht übereinander"), dann reload (oft "Kreis mit Pfeil") tippen.

Das gefällt Dir nicht? Dann +Javascript.

[JürgenB]

Hallo,

kann es sein, das du Strg+ mit dem Zweifingerzoom verwechselst?

Gruß
Jürgen

[ursus contionabundo]

in einem Tablet-Viewport kann es sein, das du Strg+ mit dem Zweifingerzoom verwechselst?

Ich schrieb bewusst:

Klar! Einfach auf Browsermenü (oft "Drei Punkte senkrecht übereinander"), dann reload (oft "Kreis mit Pfeil") tippen.

Also: "tippen" - indes nicht: "klicken".

Wie gibst Du denn auf einem Tablet CTRL++ ein? Etwa mit einer Blauzahn-Tastatur?

[JürgenB]

Hallo,

OK, dann musst du mir helfen. Ich finde bei meinem IPhone-Safari weder das Browsermenü noch die Stelle, wo ich die Schriftgröße einstellen kann.

Ich habe diese Einstellungen aber auch noch nicht vermisst, da ich ja mit der Zweifinger-Geste zoome.

Gruß
Jürgen

[ursus contionabundo]

Ich finde bei meinem IPhone-Safari weder das Browsermenü

Tja.

noch die Stelle, wo ich die Schriftgröße einstellen kann.

Ich bin wohl vergesslich. Wo habe ich bitte geschrieben, dass Du im Browsermenü die Schriftgröße einstellen sollst?

da ich ja mit der Zweifinger-Geste zoome.

1. Du willst also "zoomen". Es wird etwas vergrößert dargestellt. Durch Wischen bzw. Scrollen kannst Du danach auswählen, welcher Bereich der Seite im Viewport dargestellt wird.

2. Das Ausführen der "Zweifinger-Geste" ist ein Ereignis. Pures HTML und CSS kennen keine Ereignisse. Du brauchst also für Dein Ansinnen, auf das Zoomen mit einer Änderung der Schriftgröße (und Zurücksetzen des Zoomes) sowie einen Repaint zu regieren, Javascript.

[JürgenB]

Hallo,

OK, dann zurück zum Start.

Wie schafft man es, so zu zoomen, daß die Schrift größer wird, aber die Seite nicht größer als der Viewport wird?

Vielleicht kann Tom sich ja noch mal äußern, was er will. Nicht das wir ein Problem diskutieren, das nur aus meinem Missverständnis resultiert.

Gruß
Jürgen

[TS]

Hello,

OK, dann zurück zum Start.

Wie schafft man es, so zu zoomen, daß die Schrift größer wird, aber die Seite nicht größer als der Viewport wird?

Fast richtig: Schriftbereich nicht breiter als der Viewport.

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

Fast richtig: Schriftbereich nicht breiter als der Viewport.

und warum ist Javascript keine Option?

Gruß
Jürgen

[TS]

Hello Jürgen,

Fast richtig: Schriftbereich nicht breiter als der Viewport.

und warum ist Javascript keine Option?

Wenn ich so täglich mein Tablet benutze, dann ist das manchmal sekundenlang bis hin zu Minuten "eingefroren", weil es noch an der Abarbeitung eines komplexen und verschachtelten JS knabbert, dass sich aber leider selber killt, weil es auf AJAX-Antworten aus dem Netz wartet, deren Ausbleiben aber ("versehentlich") nicht abgefangen wurden. Das Teil steht also!

Um gar nicht erst in den Verdacht zu geraten, ähnlich beschissene Webangebote zu gestalten, suche ich immer erst nach der sparsamsten Lösung. JS sollte immer nur für echte Dialogkomponenten benutzt werden und nicht für die Überwachung des Users (wann drückt er welche Taste?).

Ich bin auch der Meinung, dass ich schon mal eine passende Lösung mit HTML und CSS in den FIngern hatte. Ich finde sie nur nicht wieder. Darum frage ich hier die Erinnerungsprofis :-)

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

nur weil Javascript für allen möglichen Unfug gebraucht werden kann, muss man es nicht verteufeln. Viele sinnvolle Dinge lassen sich nur mit JS erreichen, z.B. barrierefreie Menüs.

Wenn du auf per Ajax nachgeladene Inhalte "ewig" warten musst, kann das an schlechtem JS liegen, aber auch an einer schlechten Netzanbindung. Bei letzterem würdest auf reines html genauso lange warten wie auf Ajax-Response.

Zu deinem Problem: Ein Button, der auf Klick die Schrift vergrößert, benötigt nur etwa 1 kb zusätzlich und friert den Browser auch nicht ein. Diese A+ / A- Button hast du bestimmt schon gesehen.

Wenn man die Schriftgröße mit Touch- und Pointer-Events verändern möchte, braucht man schon etwas mehr Javascript. Und dann kann man auch einiges falsch machen, wenn man die Events abfängt und die Seite dann per Wisch-Geste nicht mehr gescrollt werden kann.

Gruß
Jürgen

[pl]

Hello Wissende,

ich brauch mal einen Tipp, wie ich es anstellen muss, damit ein Text beim Zoomen (in einem Tablet-Viewport) nicht den Viewport verlässt, sondern immer passend umgebrochen wird?

Wird er das nicht? Zeig mal bitte eine problematische Seite.

Das soll ohne JS erreicht werden. Geht das nur mit html und css?

Das geht sogar ohne css. MFG

[Martl]

Hallo Tom,

was spricht gegen hyphens oder word-break?

Grüße, Martl

[TS]

Hello,

was spricht gegen hyphens oder word-break?

Dass die Umbruchgrenze nach dem Zoomen außerhalb des Viewports liegt?

Um eben diese rechte (für europäische Ausrichtung) Umbruchgrenze geht es hier. Die soll nicht über den rechten Rand wandern dürfen.

Glück Auf
Tom vom Berg