Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Wort-Trennung!
#1
ich weiß nicht, wie es Euch geht, aber ich habe bei den teilweise riesigen Mobi-Überschriften bei langen Worten oft den Effekt, dass die Worte IRGENDWIE getrennt werden.
Bindestriche passen nicht immer.
Mit dem HTML-Befehl <wbr> kann man eine Silbentrennung einfügen, die bei Bedarf durchgeführt wird.

War mir bis eben neu, vielleicht auch dem einen oder anderen hier.

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Leider wird die atom. Silbentrennung bisher nur vom Firefox und Edge unterstützt
https://werner-zenk.de/css/silbentrennung.php
Bleibt Gesund!
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

Benutze zum arbeiten: Win10 (Windows Insider) - Mozilla Firefox, Microsoft Edge - EmEditor, Visual Studio Code - WAMP,  FileZilla, paint.net und Gimp.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
... gucke auch mal hier, da ich dort im horizontalen Akkordeon auch dieses Problem hatte ...

http://www.mobirise-tutorials.com/Lawyer...rdeon.html

... kannst Du es (zur Not) auch mit dem HTML-Tag

Code:
<wbr>

lösen (wbr = word break).

Code:
Infor<wbr>mationen

https://www.w3schools.com/tags/tag_wbr.asp


... hier noch eine alte Mobirise-Beispielseite von mir zu diesem Thema:

http://www.mobirise-tutorials.com/word-wrap.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Ja, aber dann fehlt ja immer der Bindestrich! Die Methode von Werner (#2) ist besser!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Ich kann erstmal ohne Bindestrich leben, bis auf Weiteres jedenfalls
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hallo,

um die automatische Silbentrennung (mit Trennstichen) für eine Seite einzuschalten sind zwei Schritte erforderlich:

1. Die jeweilige Sprache muss zwingend im <head>-Bereich festgelegt sein mit:

Code:
<html lang="de">

Beispiel:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
...

Um dies zu realisieren kann die Zeile entweder in jede einzelne HTML-Seite mit einem Texteditor eingetragen werden

oder

es wird die Mobirise-Erweiterung "Language v.01" von www.witsec.nl heruntergeladen und als Erweiterung installiert. Also downloaden und dann in Mobirise die Datei unter "Erweiterungen" Importieren. Die Fehlermeldung kann ignoriert werden.

Jetzt noch in Mobirise unter den Seiten-Einstellungen (Einstellungen/Zahnrad) die gewünschte Sprache bei "Site Language" einstellen ("German").

2. Um den Browsern die Trennung beizubringen muss ein Code-Schnipsel in Form einer css-Datei mit jeder Seite geladen werden:

Code:
/*=====================
Automatische Silbentrennung
=======================*/
p, span, a, ul, li {
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 2;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 2;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: auto 2;
  -o-hyphens: auto;
  hyphens: auto;
}
/*=====================
Für Überschriften
=======================*/
h1,
h2,
h3 {
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
h4,
h5 {
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
/*=====================
eos (end of schnipsel)
=======================*/

Hat man bereits eine css-Datei die mitgeladen wird, dort den Schnipsel einfach einfügen.

Es kann auch eine separate Textdatei als styles.css gespeichert werden. Dazu wird am Besten ein Verzeichnis "WEBSEITENNAME" im späteren "assets"-Verzeichnis angelegt und dort die Datei hineingelegt.

Nun noch bei allen Seiten in Mobirise (Einstellungen/Zahnrad) im Bereich

Inside <head> code:

den folgenden - um WEBSEITENNAME ergänzten - Eintrag zum Aufruf der css-Datei eintragen:

Code:
<link rel="stylesheet" href="assets/WEBSEITENNAME/styles.css" media="screen">

Jetzt sollte die Silbentrennung bei Edge, Firefox und Google-Chrome sowie bei Apples Safari funktionuckeln. Ebenso bei Windows-Phone Win8/Win10 und mindestens unter Android 8.0.

Obwohl es in Opera noch nicht funktioniert, ist die Trennung bereits enthalten (-o-hyphens: auto;). 

Wie ersichtlich, werden die Silben im Fließtext und Aufzählungen nicht unter 2 Zeichen getrennt (auto 2;). Der Wert kann natürlich erhöht/weggelassen werden (Zeilen entfernen).

Manchmal wird die Trennung an nicht gewünschten Stellen durchgeführt. Um dies zu verhindern kann man seinen Text mit entspr. Codes im Code-Editor verfeinern. Wer den nicht hat, kann die HTML-Datei bearbeiten - muss dies aber nach jedem Veröffentlichen erneut machen.

Code:
"&nbsp;" Schützt vor Trennung: „42&nbsp;Kilometer“ „42 Kilometer“ 

"​" Breitenloses Leerzeichen &#x200B; (hex.) und ​ (dez.) Wort/Wort

Mehr davon unter Quelle: http://www.stichpunkt.de/html/umbruch.html#nobreak
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Hallo PixelSchieba,

und willkommen bei uns im Forum.

Vielen Dank für diese sehr gute und verständliche Anleitung von Dir thumbs up

Das mit den Drittanbietern wie "witsec.nl" ist mir immer ein wenig suspekt, denn diese Eingriffe sind nicht von Mobirise autorisiert und können zu massiven Schwierigkeiten nach Updates führen.

Das muss aber jeder für sich selbst entscheiden.

Meines Wissens muss das Language-Tag nun auch nicht zwingend am HTML-Tag stehen (an das man über Mobirise z.Zt. nicht dran kommen kann), sondern man kann es z.B. auch an ein <p> oder ein x-beliebiges anderes Tag schreiben:

Code:
<p lang="de">bla bla bla</p>

oder z.B. auch in einen <span> Bereich:

Code:
<span lang="de">bla bla bla</span>

... das hatte ich oben am Link zu  einer meiner Seiten beschrieben, denn so erkennen die Browser auch die Sprache.

Das es mit dem Language-Tag an z.B. einem <p> Tag ebenso geht, kannst Du auf meiner Beispielseite unten am grünen Text sehen.

http://www.mobirise-tutorials.com/word-w...atures7-d5


@Martin,

... was heißt hier "besser" :eek:

... ob nun mit oder ohne Bindestrich ist ja eine andere Sache, es gibt etliche Alternativen und man muss sich individuell überlegen welche dann für sich selbst die beste Lösung ist. Manchmal kann es eben auch sinnvoller sein nur ein ganz bestimmtes Wort händisch mit <wbr> zu trennen. Das hat nichts mit "besser" oder "schlechter" zu tun, es war von mir als Alternative gedacht :confused:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Photo 
Hallo Tommy,

danke für Dein Lob.

Bedenken hinsichtlich eines nicht autorisierten Addons kann ich nachvollziehen. Es gibt allerdings reichlich andere und vor allem einfachere Gelegenheiten die eigene Sicherheit zu untergraben (Handy-App installieren, Spam E-Mails öffnen, ohne Fahrradhelm fahren etc.).

Bei mir hat die Erweiterung bereits die letzten vier Mobirise-Updates problemlos überstanden und Mobirise hat seit dem auch keine Zicken gemacht.

Das 16 KB große Addon macht es eben auch nur deutlich leichter die Sprache auszuwählen und es mit einem Schritt auf allen Seiten an die korrekte Stelle im Kopf einzutragen.


.png  SiteLangWitsec.png (Größe: 68,78 KB / Downloads: 5)



Alternativ:

zu der Installation der Erweiterung (wie in Schritt 1 beschrieben) kann die eine Code-Zeile direkt in Mobirise in jeder Seite in den Seiteneinstellungen unter

Before <!DOCTYPE>, <html> and <head> tags:

Code:
<html lang="de">

eingegeben werden. Vorteil: Kein Addon und kein manuelles Gefrickel in den HTML-Codes der Seiten mit dem Mobirise Code-Editor.

Nachteil: Nach dem Veröffentlichen ist allerdings in der jeweiligen Webseite im HTML-Code die Zeile

<html>

Code:
<!DOCTYPE html>
<html lang="de">

<html>
<head>
 
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" ...

doppelt vorhanden. Das ist aber nicht schlimm und macht nix.

Alle (!) Browser sind so fehlertolerant, dass sie den doppelten Eintrag erkennen und genauso tolerant ignorieren, die Seiten einwandfrei funktionieren und die Silbentrennung auch. Und die Webseitenbesucher werden sicherlich nicht alle in den Seitenquelltext reinsehen ...


Nachsatz: Die Schönheit des Codes liegt allerdings auch beim Betrachter.

Abhilfe möglich: Natürlich kann nun per Hand diese doppelte Zeile mit einem Text-Editor wieder entfernt werden - dann könnte jedoch genauso auch die Zeile die jetzt alternativ Mobirise einträgt, per Hand mit dem Text-Editor eingetragen werden.   

Frei nach Loriot: Schwanzkatze.


Mir war es wichtig eine einfache Lösung für eine gute automatische Silbentrennung pauschal auf der ganzen Webseite zu finden, damit auf den Smartphones die Schrift(en) möglichst groß sind und mehr Text in lesbarer Form dargestellt wird. Mit oder ohne Erweiterung funktioniert es so einwandfrei. 

Die <p> bzw. <span> Lösung funktioniert nur in dem jeweiligen Textabschnitt/Tag und ist mir zu umständlich. 



Hut ab.
PixelSchieba
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
(19.07.2019, 08:14)PixelSchieba schrieb: Alternativ:

zu der Installation der Erweiterung (wie in Schritt 1 beschrieben) kann die eine Code-Zeile direkt in Mobirise in jeder Seite in den Seiteneinstellungen unter

Before <!DOCTYPE>, <html> and <head> tags:

Code:
<html lang="de">

eingegeben werden.


... also sorry, da muss ich ganz energisch widersprechen :eek:

Vor dem DOCTYPE erzeugt eine nicht valide HTML-Seite, es erzeugt sogar einen Fehler. Das "HTML" Tag darf NICHT vor dem DOCTYPE stehen. In Deinem Beispiel steht es ja auch nicht davor, sondern dahinter.

Das ist schlichtweg falsch und nicht "unschön" und doppelt darf es auch nicht vorkommen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Mobirise hat dies wohl vor geraumer Zeit geändert ohne den Text anzupassen.

Es steht da zwar, dass der Text VOR <!DOCTYPE> eingetragen wird; in Wirklichkeit wird der Eintrag UNTER dem <!DOCTYPE> eingetragen (siehe oben). Und ein Fehler wird auch nicht produziert.

Probiers mal (mit Gemütlichkeit) aus.

Hut ab.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Nein, das stimmt nicht - vielleicht hast Du schon ein Problem mit dem "Witsec" Teil :eek:

So etwas brauche ich auch nicht ausprobieren, das ist Basic-Wissen :eek:

... dennoch - warte - ich mache es und auch einen Screenshot
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
beide Screenshots zeigen einen nicht erlaubten und falschen Eintrag "Vor dem DOCTYPE".

In den Mobirise-Seiteneinstellungen:


.jpg  Vor_DOCTYPE.JPG (Größe: 91,43 KB / Downloads: 8)


Im Quelltext vom Browser (rot weil falsch):


.jpg  Vor_DOCTYPE_Quelltext.JPG (Größe: 159,81 KB / Downloads: 7)



"Vor dem DOCTYPE" muss auch davor stehen, denn das braucht man auch öfter, z.B. um eine PHP-SESSION zu setzen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Stimmt, ich habe die Zeile

Code:
<!DOCTYPE html>

unterschlagen.

Korrekt muss der Eintrag

Code:
<!DOCTYPE html>
<html lang="de">

in den Bereich Before <!DOCTYPE>, <html> and <head> tags: eingetragen werden.

Dann sieht es später so im Quellcode aus:

Code:
<!DOCTYPE html>
<html lang="de">
<!DOCTYPE html>
<html>
<head>

Dies produziert ebenfalls keinen (sichtbaren) Fehler in auf der Webseite und funktioniert (auch wenn es nicht valider Code ist und im Quelltext rot markiert wird).

Wers korrekt mag muss mit einem Text-Editor dann zwei Zeilen entfernen:
Code:
<!DOCTYPE html>
<html>


Wie man es dreht und wendet, ist dies die aufwendigere Vorgehensweise. Deswegen benutze ich das Addon. Schwupps fertig - keine Handarbeit.



Hut ab.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Lösung mit Trennzeichen
Einfach ein & # 173 ; (Leerzeichen wegen dem Editor hier) an der Trennstelle eintragen.
Dann kommt AUTOMATISCH bei Bedarf ein Bindestrich.

Noch nicht in jedem Browser getestet
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!