Linuchs: Wie macht ihr Silbentrennung?

Moin,

erst in den letz·ten Wo·chen be·fas·se ich mich wie·der da·mit, mei·ne Sei·ten auch für Mo·bil·ge·rä·te an·zu·bie·ten. Und em·pfin·de die·se klei·nen Dis·plays als un·ge·wohnt. Viel Platz geht ver·lo·ren, wenn lan·ge Wor·te in die näch·ste Zei·le rut·schen an·statt ge·trennt zu wer·den.

Nun gibt es ja das Trenn·zei·chen ­, das na·tür·lich den Text bei Be·ar·bei·tung des Quell·co·des voll·kom·men un·le·ser·lich macht. Des·halb set·ze ich zu·neh·mend das Zei·chen · (·) an trenn·bare Stel·len und set·ze es mit Ja·va·script auf ­ um:

</body>
<script>
// „“
document.getElementsByTagName( "body" )[0].innerHTML = document.getElementsByTagName( "body" )[0].innerHTML.replace(/·/g, "&shy;");
//document.getElementsByTagName( "body" )[0].innerHTML = document.getElementsByTagName( "body" )[0].innerHTML.replace(/""/g, '„');
//document.getElementsByTagName( "body" )[0].innerHTML = document.getElementsByTagName( "body" )[0].innerHTML.replace(/''/g, '“</i>');
</script>
</html>

In manchen Dokumenten auch die an- und abführenden deutschen Gänsefüße. Aber die zerstören dann gnadenlos <form - Einträge wie value = ""

Ohne Javascript sieht so ein Text recht seltsam aus. Wie verbreitet ist noch das Surfen ohne Javascript?

Und welche Alternativen gibt es?

Gruß Linuchs

  1. Hallo Linuchs,

    wäre hyphens etwas für dich?

    Gruß
    Jürgen

  2. Hallo Linuchs

    Und welche Alternativen gibt es?

    Es gibt die Eigenschaft hyphens, mit der du Silbentrennung automatisch durch den Browser vornehmen lassen kannst. Je nach zugewiesenem Wert wird nach den angewandten Regeln des Browsers getrennt oder an Stellen, die du vorher mit &shy; gekennzeichnet hast.

    h1 {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    

    Oben mal ein Beispiel für automatische Trennung durch den Browser. Hier ist es natürlich wichtig, dass du für den jeweiligen Inhalt die Sprache mit dem lang-Attribut korrekt ausgezeichnet hast, damit der Browser die richtigen Regeln für die Silbentrennung anweden kann. Wenn nur an vorgegebenen Stellen umgebrochen werden soll, wäre der Wert manual anzugeben.

    Viele Grüße,

    Orlok

    --
    „Dance like it hurts.
    Make love like you need money.
    Work when people are watching.“ — Dogbert
  3. @@Linuchs

    Des·halb set·ze ich zu·neh·mend das Zei·chen · (&middot;) an trenn·bare Stel·len und set·ze es mit Ja·va·script auf &shy; um:

    Keine gute Idee.

    Wenn du das mit · machst, musst die diese serverseitig in bedingte Trennstriche umwandeln.

    Ohne Javascript sieht so ein Text recht seltsam aus.

    Und hört sich vermutlich bei Screenreadern noch seltsamer an. Soll heißen: die Seite ist unbenutzbar.

    Wie verbreitet ist noch das Surfen ohne Javascript?

    Sehr weit: [1] [2]

    Und welche Alternativen gibt es?

    1. Deine Tastatur so einstellen, dass du den bedingten Trennstrich direkt eingeben kannst und einen Editor verwenden (diesen so einstellen), dass bedingte Trennstriche im Editor angezeigt werden.

    2. Sich den Aufwand der bedingten Trennstriche sparen und die in Browsern implementierte automatische Silbentrennung verwenden.

    3. Eine Kombination aus beidem: automatische Silbentrennung und bei zusammengesetzten Wörten bedingten Trennstriche an den Sollbruchstellen. Den „Urinstinkt“ dürften zwar inzwischen alle Browser in ihrem Wörterbuch haben und nicht mehr „Urin-stinkt“ trennen, aber bei anderen Wörtern dürfte das die Lesbarkeit verbessern, wenn bspw. nicht „zusammenge-setzt“, sondern „zusammen-gesetzt“ getrennt wird.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. @@Gunnar Bittersmann

      Wo wir gerade über automatische Silbentrennung reden und ich Going offline lese:

      Falsche Trennung: JavaS-cript

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. Und welche Alternativen gibt es?

    Variante A:

    Für statische Dateien und das Linux-Terminal gibt es da was:

    1.Die Webseite lesen, Wort&shy;un&shy;getümer identifizieren.

    1. Datei umbrueche.sed anlegen:
    s/Deutschland/Deutsch\&shy;land/g
    s/Österreich/Öster\&shy;reich/g
    s/Schengenabkommen/Schen&shy;gen&shy;ab&shy;kommen
    …
    

    Und dann:

    backupExtension=$(date "+%Y%m%d_%H%I%S");
    find ./ -name "*.html" -exec sed -i".backup_${backupExtension}" -f umbrueche.sed {} \;
    

    Variante B, in PHP für Text jeglicher Herkunft, "on the fly"

    <?php
    class zeilenumbruch {
    
    	private $s;
    	private $r;	
    
    	function __construct () {
    	
    		# Normalerweise würde man das aus einer Textdatei auslesen:
    		
    		$this ->s[] = 'Deutschland';
    		$this ->r[]  = 'Deutsch&shy;land';
    		
    		$this ->s[] = 'Österreich';
    		$this ->r[] = 'Öster&shy;reich';
    		
    		$this ->s[] = 'Schengenabkommen';
    		$this ->r[] = 'Schen&shy;gen&shy;ab&shy;kommen';
    				
    		# ...
    		
      }
        
      function trenne ( $str ) {
    		return str_replace ( $this -> s, $this -> r, $str );
      }
    }
    
    $text="Deutschland und Österreich schaffen das Schengenabkommen ab.";
    
    $zub = new zeilenumbruch();
    
    print $zub -> trenne ( $text );
    echo "\n";
    

    Und dann wäre da noch die, - theoretisch - einfachste Lösung C:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			p {
    				hyphens: auto;
    				-ms-hyphens: auto;
    				-webkit-hyphens: auto;
    			 }
    			 
    			p.wb {
    				word-break: break-word;
    			}
    			
    			p.brutal {
    				word-break: break-all;
    			}			
    			
    		</style>
    	</head>
    	<body>
    		<p>Deutschland und Österreich schaffen das Schengenabkommen ab. Das Schengenabkommen schaffen Deutschland und Österreich ab.</p>
    		<p class="wb">Deutschland und Österreich schaffen das Schengenabkommen ab. Das Schengenabkommen schaffen Deutschland und Österreich ab.</p>
    		<p class="brutal">Deutschland und Österreich schaffen das Schengenabkommen ab. Das Schengenabkommen schaffen Deutschland und Österreich ab.</p>
    		<hr>
    		<p>Deutsch&shy;land und Öster&shy;reich schaffen das Schen&shy;gen&shy;ab&shy;kommen ab. Das Schen&shy;gen&shy;ab&shy;kommen schaffen Deutsch&shy;land und Öster&shy;reich ab.</p>
    		<p class="wb">Deutsch&shy;land und Öster&shy;reich schaffen das Schen&shy;gen&shy;ab&shy;kommen ab. Das Schen&shy;gen&shy;ab&shy;kommen schaffen Deutsch&shy;land und Öster&shy;reich ab.</p>
    
    		
    		
    	</body>
    </html>
    

    Hier der Test…

    1. Hallo

      Und dann wäre da noch die, - theoretisch - einfachste Lösung C:

      Die Lösung ist nicht nur die einfachste, weil nicht invasive Lösung, sie ist zudem auch nicht nur „theoretisch“ die einfachste Lösung. Browser, die es können, trennen die Worte (hoffentlich) an den richtigen Stellen, die [1], die es nicht können, tun es nicht und zeigen eventuell das eine oder andere Wortungetüm an, als wäre die Regel nicht notiert. Quasi alles wie immer. Es ist ja keineswegs so, dass die deutsche Sprache (fast) nur aus solchen Ungetümen bestünde.

      			p {
      				hyphens: auto;
      				-ms-hyphens: auto;
      				-webkit-hyphens: auto;
      			 }
      

      Hier wird ja immer wieder empfohlen, die präfixlose Variante an das Ende des Regelblocks zu stellen, damit Browser, die diese unterstützen, sie auch statt der gepräfixten Version benutzen. Also besser:

      			p {
      				-ms-hyphens: auto;
      				-webkit-hyphens: auto;
      				hyphens: auto;
      			 }
      

      Tschö, Auge

      --
      Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
      Kleine freie Männer von Terry Pratchett

      1. Die bei caniuse.com gezeigten Einschränkungen betreffen Browser, die die Silbentrennung nur in ihren Mobil- aber nicht in den Desktopversionen unterstützen. Das mag zwar schade sein, aber es sind ja gerade die Mobilbrowser, in denen die Silbentrennung aufgrund der Beschränkungen in der Anzeigebreite wichtig ist. Auf dem Desktop ist es mMn nicht ganz so wichtig, sie zu haben. Der eine oder andere Browser, der die Funktion überhaupt nicht unterstützt, ist mMn zu vernachlässigen, zumal sich die Anzeige in diesen Browsern rein gar nicht ändert. ↩︎

  5. Wie mache ich Silbetrennung?

    Solange ich nicht über Sprache und Syntax spreche und einen expliziten Grund habe, Trennstellen zu markieren, unterlasse ich das prinzipiell.

    Zur Unfallverhütung gibts CSS word-break.

    --
    Neu im Forum! Signaturen kann man ausblenden!
  6. Hallo Linuchs,

    Nun gibt es ja das Trenn·zei·chen &shy;, das na·tür·lich den Text bei Be·ar·bei·tung des Quell·co·des voll·kom·men un·le·ser·lich macht. Des·halb set·ze ich zu·neh·mend das Zei·chen · (&middot;) an trenn·bare Stel·len und set·ze es mit Ja·va·script auf &shy; um: […]

    Neben Gunnars Frage nach Screenreadern stellt sich mir auch die Frage, was eigentlich Suchmaschinen oder andere Aggregatoren aus solch kaputtem Text machen.

    In manchen Dokumenten auch die an- und abführenden deutschen Gänsefüße. Aber die zerstören dann gnadenlos <form - Einträge wie value = ""

    Wieso verwendest du eigentlich nicht die deutschen Anführungszeichen „“, sondern das anscheinend unmaskierte "…", was wenigstens &quot;…&quot; sein sollte?

    Viele Grüße
    Robert

    1. Wieso verwendest du eigentlich nicht die deutschen Anführungszeichen „“, sondern das anscheinend unmaskierte "…", was wenigstens &quot;…&quot; sein sollte?

      oder, unkomplizierter zu tippen: :

      <style>
      q::before {
      	content: "„";
      }
      
      q::after {
      	content: "”";
      </style>
      
      <p>Die Überwachungsmaßnahmen, die uns mit dem <q>Schengen-Abkommen</q> als <q>notwendige</q> Begleiterscheinung der neuen <q>Freiheiten</q> schmackhaft gemacht wurden, bleiben. Die Grenzen werden aber wieder zugemacht…</p>
      
      1. Moin,

        es gibt Fälle, in denen man die „Gänsefüßchen“ jenseits von „Zitaten“ anwenden möchte 😉

        Viele Grüße
        Robert

        1. es gibt Fälle, in denen man die „Gänsefüßchen“ jenseits von „Zitaten“ anwenden möchte

          Ganz wie es beliebt:

          <style>
          q::before,
          .q::before
          {
          	content: "„";
          }
          
          q::after,
          .q::after
          {
          	content: "”";
          }
          </style>
          <p>es gibt Fälle, in denen man die <em class="q">Gänsefüßchen</em> jenseits von <em class="q">Zitaten</em> anwenden möchte.</p>
          

          Im übrigen wäre <q> hier angebracht. Denn Du willst mit der Quotierung klarstellen: „Viele nennen es „Gänsefüßchen“”. Das ist „Kurzzitat” genug. Streng genommen müsste man also:

          <p>es gibt Fälle, in denen man die <q>Gänsefüßchen</q> jenseits von <em class="q">Zitaten</em> anwenden möchte.</p>
          

          notieren. Jedenfalls wenn man davon ausgeht, dass Du das Wort „Zitaten“ hervorheben wolltest.

          1. Hallo Regina,

            il y a des «cas», where “goose feet” falsch sind.

            Gunnar hat dazu mal blitzartig was erzählt

            Rolf

            --
            sumpsi - posui - clusi
            1. @@Rolf B

              il y a des «cas», where “goose feet” falsch sind.

              Ist das Französisch? Wenn ja, gehören Leerzeichen auch innerhalb der Guillemets hin. NBSP natürlich. Oder NNBSP.

              Gunnar hat dazu mal blitzartig was erzählt

              Witzig, genau an der Stelle war ich heute morgen auch.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hallo Gunnar,

                das ist fr-CH. Da macht man innerhalb der Guillemets keine Leerstelle. Sagt Wikipedia.

                (Puh, Ausrede gefunden)

                Rolf

                --
                sumpsi - posui - clusi
          2. @@Regina Schaukrug

            <p>es gibt Fälle, in denen man die <em class="q">Gänsefüßchen</em> jenseits von <em class="q">Zitaten</em> anwenden möchte.</p>
            

            Ich sehe hier keine Hervorhebung wegen besonderer Bedeutung. Also nicht em, sondern span. i mag auch passend sein.

            Im übrigen wäre <q> hier angebracht. Denn Du willst mit der Quotierung klarstellen: „Viele nennen es „Gänsefüßchen“”.

            Was viele so nennen, ist kein Zitat.

            Ein Zitat ist, was jemand bestimmtes zu einer bestimmten Gegebenheit von sich gegeben hat.

            BTW, die Gänsefüßchen sind dir durcheinander geraten. Innen stehen einfache:: „Viele nennen es ‚Gänsefüßchen‘.“

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Im übrigen wäre <q> hier angebracht. Denn Du willst mit der Quotierung klarstellen: „Viele nennen es „Gänsefüßchen“”.

              Was viele so nennen, ist kein Zitat.

              Ein Zitat ist, was jemand bestimmtes zu einer bestimmten Gegebenheit von sich gegeben hat.

              Naja. In dem Fall ist sogar eines, wenn auch durch „verniedlichen“ etwas „verballhornt“.

              Zitat: „Es war dann der gewitzte Dichter Jean Paul (1763-1825), der den Ausdruck Gänsefuß durch seine scharfzüngigen Schriften populär machte.“

              Quelle: wissen.de

              Daneben gibt es im Deutschen viele Gründe für das Quoten, die in HTML nicht berücksichtigt wurden.

              Zum Beispiel die Markierung als „hinterfragungswürdig“ oder gar „verneinend“. Wenn man in einer Schrift ein „Rechtsanwalt“ (mit Quotas!) vor dessen Name setzt, dann stellt sich mancher Richter in unserem ach so demokratischen, die Meinungsfreiheit also schützendem „Rechtsstaat“ auf den Standpunkt, dass man den gewiss feinen und sauberen, aber leider auch etwas kriminellen Herrn Rechtsanwalt damit habe verleumden wollen - weil man seine Rolle als „Organ der Rechtspflege“ (hier als Zitat aus § 1 BRAO gemeint) durch das Stellen der Berufsbezeichnung in die Gänsefüße in Frage stellte.

              Hinweis: Das vorstehende ist nicht mir passiert.

        2. @@Robert B.

          es gibt Fälle, in denen man die „Gänsefüßchen“ jenseits von „Zitaten“ anwenden möchte 😉

          Wie das von Regina genannte Beispiel. Wenn sich mit „notwendige“ und „Freiheiten“ auf etwas bezogen wird, was tatsächlich jemand wörtlich so gesagt hat (und nur dann), mag die Auszeichnung als Zitat angebracht sein (aber nicht notwendig).

          Auf „Schengen-Abkommen“ trifft das mit Sicherheit nicht zu. Das ist ein Begriff in Gänsefüßchen, aber kein Zitat.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Auf „Schengen-Abkommen“ trifft das mit Sicherheit nicht zu. Das ist ein Begriff in Gänsefüßchen, aber kein Zitat.

            Da kann man geteilter Meinung sein. Denn da hat sich irgendjemand mal gedacht, er nennt das „Übereinkommen vom 14. Juni 1985 zwischen den Regierungen der Staaten der Benelux-Wirtschaftsunion, der Bundesrepublik Deutschland und der Französischen Republik betreffend den schrittweisen Abbau der Kontrollen an den gemeinsamen Grenzen“ einfach mal „Schengen-Abkommen“.

            … und wird immer wieder zitiert.

            1. Moin,

              Da kann man geteilter Meinung sein. Denn da hat sich irgendjemand mal gedacht, er nennt das „Übereinkommen vom 14. Juni 1985 zwischen den Regierungen der Staaten der Benelux-Wirtschaftsunion, der Bundesrepublik Deutschland und der Französischen Republik betreffend den schrittweisen Abbau der Kontrollen an den gemeinsamen Grenzen“ einfach mal „Schengen-Abkommen“.

              … und wird immer wieder zitiert.

              Wenn ich diesen Begriff dann zitiere, müsste ich nicht strenggenommen „‚Schengen-Abkommen‘“ schreiben? 😜

              Viele Grüße
              Robert

              1. Wenn ich diesen Begriff dann zitiere, müsste ich nicht strenggenommen „‚Schengen-Abkommen‘“ schreiben?

                Man kann über Sprache und Semantik, wie sich zeigt, vieles bis zur völligen Ermüdung diskutieren und dabei auch gehörig „schlaumeiern“. Was ausgedrückt werden sollte weiß nur der sich per HTML schriftlich entäußernde. Was er ausgedrückt hat erscheint manchem manchmal eindeutig und manch anderem oder demselben andermal als „der Spekulation zugänglich“.

      2. Hallo

        q::before {
        	content: "„";
        }
        
        q::after {
        	content: "”";
        }
        

        Die Standardwerte für die content-Eigenschaft der Pseudoelemente q::before und q::after sind die Keywords open-quote und close-quote. Diese stehen für die Werte der quotes-Eigenschaft des q-Elements. Es genügt mithin, die Angaben dort zu machen:

        q {
          quotes: '„' '“' '‚' '‘';
        }
        

        Wie in dem Beispiel oben zu sehen ist, können als Wert der quotes-Eigenschaft auch mehr als nur ein Paar Anführungszeichen angegeben werden, für den Fall, dass Elemente geschachtelt werden und dabei verschiedene Zeichen verwendet werden sollen.

        Es ist regelmäßig auch sinnvoll, die Anführungszeichen abhängig von der Sprache zu definieren, was sich z.B. über die Pseudoklasse :lang bewerkstelligen lässt:

        :lang(de) {
          quotes: '„' '“' '‚' '‘';
        }
        

        Viele Grüße,

        Orlok

        --
        „Dance like it hurts.
        Make love like you need money.
        Work when people are watching.“ — Dogbert