Überlappende Buchstaben in Mobil-Version bei Browser Textskalierung

Nina-D schrieb am 16.04.2020 um 12:56 Uhr

Hallo zusammen,

ich habe ein seltsames Problem bei meiner Mobilseiten-Erstellung entdeckt und hoffe, dass jmd mir da weiterhelfen kann:

Nach dem Hochladen meiner Website wollte ich mir auch die Mobilversion auf meinem Smartphone anschauen.
Dabei habe ich festgestellt, dass sich die Buchstaben von dem Text überlappen.
Das sieht dann so aus:

Anschließend habe ich herausgefunden, dass der Fehler nicht direkt mit meinen Website-Einstellungen zusammenhängt.
Das Problem entsteht dadurch, dass ich in meinem Smartphone-Browser eine Textskalierung um die 120% eingestellt hatte.
Dies führt wohl bei manchen Websiten, auch bei meiner eigenen, zu diesen Buchstabenverschiebungen.

Nun habe ich mich gefragt, ob ich das in meinem Webdesigner (Premium 16) irgendwie abwenden kann, falls ein Besucher zufällig auch die Textskalierung im Smartphone aktiviert hätte.

Weiß jemand zufällig einen Rat? Vielen Dank schonmal.

Kommentare

BeRo schrieb am 16.04.2020 um 14:24 Uhr

[...] habe ich festgestellt, dass sich die Buchstaben von dem Text überlappen. [...]

Das Problem ist leider nicht neu.
Es begleitet uns schon seit die ersten Versionen des Web-/Xara Designers auf den Markt gekommen sind, bis hin zur Version 16.
Die Ursache ist trivial. Und der Schuldige ist nicht (alleine) das Design Programm...

Der Auslöser des Fehlers ist die Formatierung des Textes im Blocksatz. Jeder Browser Programmierer hat bei der Umsetzung der Darstellung solcher Texte scheinbar eine eigene Vorstellung von der HTML Befehlsstruktur umgesetzt. Der "Erfolg" ist klar: Ein Browser kann den Blocksatz besser wiedergeben, ein anderer nur fehlerhaft.

Magix hat dazu schon im Mai 2019 ein Workaround veröffentlicht (klick), das dem Vernehmen nach aber auch nicht immer funktioniert.

Die bessere Lösung ist ein Update des WD/XD auf die Version 17. Da wurde das Blocksatz Problem genial gelöst, indem jedes Wort des Textes in ein separates <span> Tag gesetzt wird. Damit ist der Zwischenraum zwischen den Wörtern einfach anpassbar und der Text wird optisch fehlerfrei angezeigt.

Tipp: Gönn' Dir ein Update, das sogar gratis ist wenn Dein WD noch innerhalb der 365 Tage der Update Garantie ist. 🙂

Zuletzt geändert von BeRo am 16.04.2020, 14:25, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Nina-D schrieb am 16.04.2020 um 16:01 Uhr

Hi BerRo,

vielen Dank für deine aufschlussreiche Erklärung. Es liegt tatsächlich an dem Blocksatz.
Deine verlinkte Lösung von Magix habe ich eben leider ohne Erfolg ausprobiert.

Kann ich nach einem Update auf 17 davon ausgehen, dass sich dann das Problem von selbst erledigt oder muss ich da noch was einstellen?

Was ist denn eine kostenlose Update Garantie? Die würde ich mir ja gern gönnen😎... bekomme aber immer nur ein PopUp mit einem Update Angebot von knapp 60€. Dabei habe ich den Webdesigner 16 erst im Dezember '19 per Upgrade erworben.

Oder hätte ich mir extra eine Garantie mitbestellen sollen?!

BeRo schrieb am 16.04.2020 um 16:33 Uhr

[...] Kann ich nach einem Update auf 17 davon ausgehen, dass sich dann das Problem von selbst erledigt [...]

Wenn Deine Projektdatei ursprünglich mit dem WD16 erstellt wurde, sollte die "Reparatur" ohne weitere Eingriffe deinerseits funktionieren.

[...] Dabei habe ich den Webdesigner 16 erst im Dezember '19 per Upgrade erworben. [...]

Dann gilt die Update Garantie bis Dez. 2020.
Lade Dir also einfach die Testversion herunter (klick) und schalte die neue Version nach der Installation mit Deiner (WD16 prem) Serien Nr. frei!

Probier's einfach aus, das Update ist kostenfrei und die Installation ist mit ein paar Mausklicks gemacht...

Zuletzt geändert von BeRo am 16.04.2020, 17:20, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Nina-D schrieb am 16.04.2020 um 21:09 Uhr

Prima! Ich hab deine Anweisung befolgt und habe nun ein kostenloses Upgrade bekommen. Das freut mich :-)
Habe echt nicht gewusst, dass sowas noch drin ist ;-)

Das Problem mit den verschobenen Buchstaben war aber leider immer noch da:

Ich habe meine Seite, die ich im WD 16 erstellt habe nun im WD 17 geöffnet und nach dem neuen Upload blieben die überlappenden Buchstaben, wenn ich die Lesbarkeit im Browser auf 120% eingestellt habe.

Einpaar Experimente später habe ich folgendes herausgefunden:

Meine Texte habe ich mit Hilfe dieses "roten Striches", der den Text beweglich macht, erstellt. Mir fehlt leider der Fachbegriff dafür ;-)- DANN entstehen die überlappenden Buchstaben.

Wenn ich meinen Text ohne dieses "Textwerkzeuges" einfüge, habe ich kein Problem mehr mit den Buchstaben!
Ebenso wird der Blocktext korrekt dargestellt, wenn ich ihn in ein "quadratisches Textfeld" einfüge.

Warum das so ist, keine Ahnung😧

Nina-D schrieb am 16.04.2020 um 21:44 Uhr

Update: Weiterhin habe ich herausgefunden, dass wohl irgendeine falsche Information in der Textformatierung gewesen sein muss.

Nun geht es auch mit dem roten Strich- Textwerkzeug!
Folgendes habe ich gemacht:

Den Text ausschneiden und erstmal ohne Textfeld wieder einfügen. Danach ist wohl die falsche Info oder was auch immer raus aus der Formatierung. Danach kann man wieder guten Gewissens ein Textfeld oder diesen roten Strich erzeugen und seinen Text wieder einfügen = keine überlappenden Buchstaben mehr.

Echt seltsam...
 

BeRo schrieb am 16.04.2020 um 22:44 Uhr

[...] Das Problem mit den verschobenen Buchstaben war aber leider immer noch da [...]

Leider kann ich das nicht testen, weil ich keine 16er Projektdateien habe, in denen Blocktext angelegt wurde und ich die Version 16 "entsorgt" habe.

[...] Auf meiner Startseite klappt es gut, auf der Impressumseite wieder nicht...obwohl ich nun alle Blocktexte in ein quadratisches Textfeld eingefügt habe. [...]

Für die Formatierung des Textes als Blocktext ist es egal, ob der Ursprungstext in einer sogen. Textspalte (rote Linie) oder in einem Textbereich (Rechteck in gestrichelter, roter Linie) erstellt wurde.

Die Darstellung als Blocktext funktioniert (ab Ver. 17 prem.) fehlerlos in allen Zoomstufen, zumindest war das in meinen Tests so...

Lege zum Test einfach mal eine(n) neue(n) Textspalte/Textbereich in Deinem Projekt an und fülle den z. B. mit "Lorem Ipsum" Text, indem Du den Textcursor in dem neu angelegen Bereich aktivierst und 2-3 Mal die Tastenkombination "STRG + Shift + L" drückst.
Den so erstellten Text formatierst Du dann als Blocktext, exportierst das Projekt zunächst lokal, irgendwo hin auf Deine Festplatte und testest, ob die Blocktext Darstellung jetzt fehlerfrei funktioniert.

Ist der Test erfolgreich, wovon ich ausgehe, dann musst Du alle vorhandenen Texte neu formatieren. Mit ein bisschen Glück genügt es, die Texte zunächst linksbündig zu formatieren, das Projekt danach unter einem neuen Namen zu speichern, das Programm (den WD) zu beenden, neu zu starten und das neu erstellte Projekt wieder zu öffnen. Jetzt kannst Du alle Texte als Blocktext neu formatieren und testen, ob alles geklappt hat (s. o.)

Ich drück' Dir mal die Daumen... 😉

Edit 22:50 h

[...] Text wieder einfügen = keine überlappenden Buchstaben mehr. Echt seltsam... [...]

Ich sehen gerade, dass Du schon erfolgreich warst.
Die Ursache des Erfolgs ist klar: Durch die Neuformatierung ist die "alte" fehlerhafte Struktur der Texformatierung, die der WD16 angelegt hatte, gelöscht- und durch die neue Struktur vom WD17 ersetzt worden...

Zuletzt geändert von BeRo am 16.04.2020, 22:50, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Nina-D schrieb am 17.04.2020 um 14:24 Uhr

Hi BeRo,

vielen Dank für deinen Support. Ich habe heute wieder Stunden mit diesem Problem verbracht und leider immer noch keine richtige Lösung. Zuerst habe ich gedacht, dass das Problem an meiner WD16- Datei liegt und mit dem WD17 jetzt "alles wieder gut" wird.
Leider habe ich festgestellt, dass meine Copy-und Paste Methode bei den Texten garkeine Lösung ist.
Sobald ich den ausgeschnittenen Text in ein neues Textfeld kopiere, ist zwar der Blocksatz ausgewählt, aber wenn man genau hinsieht, ist es doch linksbündig (2ter Text von oben auf dem Bild)

Deinen Tipp mit neuem Projekt abspeichern und formatieren, habe ich gemacht, aber auch ohne Erfolg😞

Sobald im Handy ein Zoom eingestellt ist, werden alle Buchstaben verschoben. Ich habe es an zwei unterschiedlichen Handymodellen und Browsern getestet.
 

Dann mein neuester Test:

Wenn ich im WD17 eine ganz neue Vorlagenseite von Magix öffne und den vorhandenen Text als Blocksatz formatiere und hochlade, sind auch hier die Buchstaben verschoben.

So sieht das in meinem WD17 aus:

und nach dem Upload (bei eingestelltem Zoom) leider immernoch so:

Da muss irgendwo der Wurm drin sein?! Aber ich steh total aufm Schlauch und bin nach sovielen Stunden an Versuchen schon mit meinem Latein am Ende...Fällt dir da noch was ein?

BeRo schrieb am 17.04.2020 um 17:10 Uhr

[...] wenn man genau hinsieht, ist es doch linksbündig (2ter Text von oben auf dem Bild) [...]

Das kann passieren, wenn im Text weiche Zeilenumbrüche vorhanden sind (Shift + Enter) oder wenn der Textcursor in einem kurzen- oder leeren Absatz steht. Dann wird nur dieser Absatz als Blocksatz formatiert. Der restliche, Text bleibt unberührt, in Deinem Beispiel also linksbündig formatiert.
Abhilfe für den 2. Fall:
Klick in den Textbereich und drück' anschließend 1x die ESC Taste. Damit wird der gesamte Text eines Textbereichs für Formataufgaben ausgewählt und er kann durch einfaches Klicken der Formatsymbole formatiert werden. Das gilt nicht, wenn weiche Zeilenumbrüche vorhanden sind (s.o.).

[...] nach dem Upload (bei eingestelltem Zoom) leider immernoch so: [...] Da muss irgendwo der Wurm drin sein [...]

Poste doch mal die URL zu der Testdatei, dann schau ich mir das näher an...

Alternativ kannst Du Dir auf deinen Smartphones die Blocksatz Demo ansehen, die ich mit dem WD17 prem. aus einem Standardtext erstellt habe (klick).
Hier der Screenshot der Mobilvariante bei 120% Zoom.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Nina-D schrieb am 19.04.2020 um 13:10 Uhr

Hi BeRo,

danke für die Rückmeldung. Ich habe das jetzt auch mit dem ESC und den Zeilenumbrüchen probiert und damit den Text im Feld in einen "ordentlichen" Blocksatz umformatiert.

Sobald ich also einen richtigen Blocktext habe, wird er mir beim Zoom überlappend angezeigt!

Auch bei deiner Beispielseite zeigt sich mir dieses Problem auf meinem Handy:

 

Ich habe mal eine Beispielseite vom WD17 auf Magix hochgeladen, wo es ja das selbe Prob gibt:

http://fluffi.magix.net/public/

 

Dann liegt es wohl einfach am Handy? Ich bekomme die Anzeige auf einem Samsung Galaxy und auf einem LG- Handy auch. Wäre echt blöd, jetzt auf den schönen Blocksatz verzichten zu müssen, um sicher zu gehen, dass alle es lesen können😳

marboe schrieb am 19.04.2020 um 13:48 Uhr

Falls es dir hilft :Samsung Smartphone 10

Also bei mir alles gut in der Ansicht. Gruß Marboe

Nina-D schrieb am 19.04.2020 um 14:53 Uhr

Hi marboe,

danke für den Screenshot. Hast du auch den Zoom in deinem Browser Menü aktiviert?

Im 100% Zoom wird es bei mir auch so wie bei dir, also korrekt, angezeigt.

BeRo schrieb am 20.04.2020 um 00:06 Uhr

Ich habe gerade Deine Demo auf 3 verschiedenen (Android) Mobilgeräten angesehen und unterschiedliche Zoomstufen- in unterschiedlichen Browsern probiert, da ist alles so wie es sein soll.

Wo immer das Problem seinen Ursprung haben mag, an der HTML Datei, die der WD produziert, scheint es nicht zu liegen. Es ist ja auch schwer vorstellbar, dass ein Browser nicht in der Lage sein soll, einen Text fehlerfrei darzustellen der mit unterschiedlichen Wortabständen gespeichert wurde. Da im vorliegenden Fall jedes Wort in einem eigenen <span> Tag abgelegt wird sollte eine Überlappung der einzelnen Wörter bei der Darstellung gar nicht möglich sein... 😕

Das Rätsel wird uns vermutlich ungelöst erhalten bleiben.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Nina-D schrieb am 20.04.2020 um 11:30 Uhr

Hallo,

danke für den tollen Support und das Prüfen auf anderen Browsern.
Auf jeden Fall bin ich erleichtert, dass das Problem in den meisten Fällen dann nicht auftreten wird und ich meinen Blocktext behalten kann 😃

Des Rätsels Lösung muss wohl bei einigen Browsern im Mobilgerät liegen.
Nach einigem Ausprobieren habe ich nun festgestellt, dass meine Seite im Chrome-Browser tatsächlich normal angezeigt wird, ohne Verschiebung😎👍

Probieren wollte ich es auch im Firefox und Opera, aber dort finde ich garkeine Funktion für Textskalierung.

Was ich jetzt mit 2 Handys feststellen konnte ist, dass der "Via"-Browser und der vorinstallierte "Internet"-Browser (beim Galaxy S4 und beim LG G5) wohl den Code nicht richtig lesen kann und Fehler macht.

Anders kann ich mir das nicht erklären.

Ich hoffe nun, dass die wenigsten diese Browser noch benutzen!
(Denn wie ich festgestellt habe, ist nicht nur der Blocktext überlappt, sondern auch die Überschriften verschieben sich durch den Textzoom sehr ungünstig, sodass der Text über die Bilder hinausragt und kaum lesbar ist.
Eine Katastrophe🙈

Geppetto schrieb am 20.04.2020 um 13:21 Uhr

Hallo Nina

Ich habe deinen Link: http://fluffi.magix.net/public/ auprobiert.

Samsung A5
Ansicht 100% klappt ganz normal
Ansicht 120% die Buchstaben werden verschoben.
Nun habe ich den Text aus deinem Link kopiert und in meiner Seite ausprobiert.
Nun erscheint im WD Text viele Formatvorlagen
Das findest Du, wenn du den gesamten Text markierst neben der Grösse.
Stelle dort ein "normaler Text" und es geht auch mit 120% auf meinem Handy hat es geklappt.
Allerdings wird der Text Umbruch nicht automatisch gemacht, einige Worte sind für die Darstellung zu gross. Du musst seitlich scrollen :-). Aber besser als die überlappenden Buchstaben alleweil.
Ein versuch ist es wert
Gruss Geppetto

Nina-D schrieb am 20.04.2020 um 14:41 Uhr

Hallo Geppetto,

danke für die Info. Welchen Browser hast du auf deinem Samsung A5?

Ich habe deinen Tipp ausprobiert, der Text war bei mir schon auf normal eingestellt. Habe es nochmal gemacht... Trotzdem gibt es die überlappende Buchstaben.

Hier ein Screenshot von meinem WD:

Geppetto schrieb am 20.04.2020 um 17:34 Uhr

Hallo Nina

Auf meinem Phone läuft Samsung Internet11.1.2.2

Ein Lösungsvorschlag der bestimmt klappt geht so:
Erstelle ein Widget in der Grösse deines Textes
Klicke auf das Widget und auf bearbeiten:
Klicke auf HTML Code Body
schreibe als erstes: <p align="justify">
(Dieser HTML Code erzwingt einen Blocktext)
Schreibe nun deinen Text und beende den HTML Code mit:
</p>

So klapt es mit dem Blocksatz :-)

Gruss Geppetto

 

Nina-D schrieb am 20.04.2020 um 21:52 Uhr

Hi Gepetto,

interessanter Ansatz. Ich bin mir nur nicht sicher, ob das mir nicht zu aufwändig wäre. Ich hab sehr gern den Text unter meinen Bildern direkt zur Bearbeitung stehen. Über ein Widget wäre das ja mehr Arbeit ;-)

Aber als Ass im Ärmel könnte ich das auf Seiten benutzen, die ich eh kaum ändere.

Ansonsten bin ich schon drauf und dran, alles linksbündig zu machen, um besser schlafen zu können😜