Some weeks ago I began to play around with full justification of texts beyond LaTeX. Fully justified texts are used by professional typesetters and they can be found in almost every newspaper. Full justification is necessary there, because otherwise the reader would loose the orientation between all the small columns. They also appear more and more in the Internet as it just looks more professional and is far easier to read, in particular when the paragraph widths are small. This is the case on mobile devices and in multi-column-layouts using HTML5.
There’s an important link to Responsive Webdesign as the justification depends essentially on the display-width. If a fully justified paragraph is hyphened with the usual hyphen -
, it works only for a specific text/box-width and usually fails with slightly changed rendering conditions. Not only in Responsive Design, it is expected that all texts are scaling properly and are displayed in a readable and consistent fashion, so a “hard hyphen” -
is a very bad idea.
Some time ago a found a website of a professional marketing group which had a short (fully justified) paragraph at the top of their homepage. But they used just a normal hyphen -
, which results in ugly white spaces between the words when zooming in/out. This is of course not a good way to create justified paragraphs and can result in a bad impression!
Above I mentioned already TeX, which has a great (maybe the best?) hyphenation algorithm. Anyway, it’s the best open one ;-). This algorithm uses syllable division based on language-specific patterns. Of course there exist many exceptions to this common rules, but the TeX-algorithm is very well-engineered and fails very rarely under special and unpredictable cases (in these cases you can help TeX by adding your own rules).
A simple hyphenation algorithm with pattern-detection can be easily implemented, but I only want perfect solutions. So, professional setting programs have their (good) solutions and take their time to process all the data. So what are the solutions for the web?
The problem is that most Browser don’t have syllable division algorithms implemented, so the developers and web designers have to take care about this issue. There exist several solutions which enable automatic hyphenation on the web. Some are implemented in JavaScript, which generate the hyphenation at run-/render-time in the browser. In my opinion this is the worst idea to solve this problem, as JavaScript is required and the hyphenation is done for every rendering and every client (resulting in longer rendering times), thus it is more inefficient than other solutions.
Others generate the so-called “soft-hyphens” at run- or compile-time (on the server by a CGI-language or locally by static compilers), which are embedded in the HTML-sourcecode by the ­
-code. These HTML-Codes are hints for the browser and signal them the possible syllable divisions. The Browser then knows where an in-word break is possible and justifies the paragraph perfectly depending on the block width. This method is used by acrylamid via a filter and therefore also enabled on this homepage. It is the best method for the time being, because it is supported by all browsers! The only downside of the soft hyphens is, that the text is quite unreadable in the source code (semantic expressions are of course not affected).
The best news is an upcoming feature of CSS3, called hyphens
. It enables automatic hyphenation algorithms in the browsers, so that they can finally do the work they have to do: display content properly. The feature is yet not fully implemented in every browser, so that browser-specific properties have to be used. Additionally the browsers may not support all languages yet.
body {
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
At the time being, the feature is not at all reliably implemented! The best way remains adding soft hyphens until every browser has a good hyphenation algorithm. Nevertheless I added this code to my stylesheet, maybe it is helpful for some renderings.
The current state of art can be tested on a private test-page. The specification is – as usual – at W3.org in the section CSS Text Level 3.