Hyphenation i18n and L10n

by Manuel Souto Pico

HTML

<body>

<h1>Hyphenation internationalization</h1>

<h2>Breaking text manually</h2>
<p>Ideally, we should produce translations that are independent of the display mode, and therefore render equally well in different kinds of devices and screens, or different sizes of brower or app windows.</p>

<blockquote>
Since different browsers and different operating systems might display the text examples below different, this documentation item uses images (taken on Firefox 107.0 64-bit for archlinux) to ensure homogeneous viewing for all audiences. In any case, the original code used is included below (but commented out) so you can fork this article and play with that.
</blockquote>

<h3>Hard hyphens</h3>

<p>
In the text below, the excesive horizontal separation between words in the penultimate line could be umpleasant to the eye.
</p>

<!-- 
<p class="textbox_short text">Bei den älteren Testpersonen war in diesen Regionen eine verminderte Aktivität erkennbar. Dies wurde allerdings durch die Aktivierung anderer Gehirnbereiche kompensiert. Eine dieser Regionen ist der Hippocampus, der als Sitz des Sprachgedächtnisses gilt und beim <span style="color:red">Auswendiglernen</span> aktiv ist.</p>
-->

<img src="https://imgur.com/llSvcdt.png" />

<p>Translators might be tempted (or even instructed) to use a "hard" hyphen character to break the text at the end of the line, and that is likely to seem a good approach to fix layout issues like the one above. In the example below the text looks fine because the hyphen is inserted so as to suit the text box size. </p>

<!-- 
<p class="textbox_short text">Bei den älteren Testpersonen war in diesen Regionen eine verminderte Aktivität erkennbar. Dies wurde allerdings durch die Aktivierung anderer Gehirnbereiche kompensiert. Eine dieser Regionen ist der Hippocampus, der als Sitz des Sprachgedächtnisses gilt und beim <span style="color:red">Auswendig-lernen</span> aktiv ist.</p>
-->

<img src="https://imgur.com/AMKRyuO.png" />

<p>However,...

CSS

p.text {
  text-align: justify;
  margin-left: 50px;
  border: 1px solid black;
  padding: 5px;
  font-family: monospace;  
}

img {
  margin-left: 50px;
}

blockquote {
  font-size: 80%;
  background-color: #E0E0E0;
  padding: 10px;
}

p.textbox_short {
    width: 29em; 
    word-wrap: break-word;
}

p.textbox_long {
    width: 33em; 
    word-wrap: break-word;
}

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