Justifying Hyphens

summary

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, 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:

CSS
  1. .someTextClass{
  2.         -moz-hyphens: auto;
  3.         -ms-hyphens: auto;
  4.         -o-hyphens: auto;
  5.         -webkit-hyphens: auto;
  6.         hyphens: auto; 
  7. }

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.

PHP
  1. #Include the hyphen function
  2. include_once("hyphenator.php");
  3. #Get content to hyphenate
  4. $text = file_get_contents($someFile);
  5. #Pass through hyphenator function
  6. $textHyphens = hyphenator($text);
  7. #Display
  8. 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
  1. <?php
  2. #Choose language
  3. switch ($post->language) {
  4.         case 'castellano':
  5.                 $language = 'es';
  6.                 break;
  7.         default:
  8.                 $language = 'en-US';
  9.                 break;
  10. }
  11. #Dislay HTML element with correct class and language
  12. echo '
  13. <div class="hyphenate" lang="$language">
  14.         some text
  15. </div>';
  16. ?>
  17. #Include hyphenator javascript
  18. <script src='/Hyphenator/Hyphenator.js' type='text/javascript'></script>
  19. #Run hyphenator, will only change HTML elements in hyphenate class
  20. <script type='text/javascript'>
  21.             Hyphenator.run();
  22. </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.

-biafra

comments

comments powered by Disqus

other entires to explore:

comment system!
05 august 2012 | website

Wanted to add the ability for people to comment on this website, but delayed adding the feature until I could write the code myself. There [...]are many pre-built PHP solutions on the market (like commentator), but the original purpose of this site was to allow me to learn how to build a website from scratch. So I've implemented the comment system using about a hundred lines of code to access the MySQL database, verify inputs and display all the comments for a particular article.

comment system!
05 august 2012 | website

Wanted to add the ability for people to comment on this website, but delayed adding the feature until I could write the code myself. There [...]are many pre-built PHP solutions on the market (like commentator), but the original purpose of this site was to allow me to learn how to build a website from scratch. So I've implemented the comment system using about a hundred lines of code to access the MySQL database, verify inputs and display all the comments for a particular article.

state of sbsa: a review of 2017 and thoughts on future directions
04 june 2017 | sbsa

I spent the past year leading the Stanford Biosciences Student Association (SBSA) as President. This post consist of the letter to the comm[...]unity I sent out at the end of my term giving some highlights of the past year, those who have helped out, and thoughts on future directions.

comp. neuro
30 november 2010 | science

Presentation I gave in 9.29, the computational neuroscience class at MIT. They attempted to build a model that could use the information ob[...]tained from recordings in the prefrontal cortex and other areas of a monkey brain to predict their behavior based on the 'state' their neuron groups were in.

©2006-2017 | biafra ahanonu | updated 19 june 2017
biafra ahanonu