stanford
linkden
github
goodreads
medium
twitterJustified text is awesome. Clean lines align well with other elements and it doesn't produce a crazy jagged edge. But without hyphens, problems quickly arise. Some lines have super large spaces between words and the end look is quite ugly. There are several solutions: css, server-side, and javascript.
Justified text is awesome. Clean lines align well with other elements and it doesn't produce a crazy jagged edge. But without hyphens, problems quickly arise. Some lines have super large spaces between words and the end look is quite ugly. There are several solutions: css, server-side, or javascript.
CSS
The easiest, though least reliable, implementation is to use the new CSS3 hyphens property:
- .someTextClass{
- -moz-hyphens: auto;
- -ms-hyphens: auto;
- -o-hyphens: auto;
- -webkit-hyphens: auto;
- hyphens: auto;
- }
But this is currently vendor specific and requires that lang="en" or some equivalent lang attribute be set for the HTML element to be hypenated.
Server-side
The next method would be to use server-side scripts that add the soft hyphen (­) element into words, e.g. word­ing. Since nearly all browsers support the soft hyphen, this is the preferred method at the moment. phpHyphenator is a PHP function that adds soft hyphens in a language aware manner. However, if you have PHP or other scripts mixed in with your normal text, it will falter. Hence, I do not use it on this site.
- #Include the hyphen function
- include_once("hyphenator.php");
- #Get content to hyphenate
- #Pass through hyphenator function
- $textHyphens = hyphenator($text);
- #Display
- view::displayPost($textHyphens);
The other server-side method would be to simple add soft hyphens to any word longer than a specified length via preg_replace_callback() or some other regex function. However, this is very crude and would lead to hyphens placed without regard for meaning. You wouldn't want to accidentally have ass-ets instead of as-sets on a line break. See SoftHyphens Function for an example.
Javascript
The last way is to use javascript. Luckily, there is a script called hyphenator that automatically adds hyphens. It is language aware (provided you tell it the language) and from tests on this site, seems pretty reliable. This is nice because the source stays readable, it won't interfere with server-side scripts, and the text is only modified at run-time. However, it moves the burden of parsing the text is passed onto the client and no everyone has javascript enabled.
- <?php
- #Choose language
- switch ($post->language) {
- case 'castellano':
- $language = 'es';
- break;
- default:
- $language = 'en-US';
- break;
- }
- #Dislay HTML element with correct class and language
- echo '
- <div class="hyphenate" lang="$language">
- some text
- </div>';
- ?>
- #Include hyphenator javascript
- <script src='/Hyphenator/Hyphenator.js' type='text/javascript'></script>
- #Run hyphenator, will only change HTML elements in hyphenate class
- <script type='text/javascript'>
- Hyphenator.run();
- </script>
Ultimately, the first solution, using CSS, would be the preferred method as it would have browser-specific support that has minimal impact on the client. We'll have to see how long it takes for each browser to implement the hyphens property fully. Until then, javascript or server-side is the way to go.