next»

next article
The Graphical Abstract, Part 1
in science on 11 November 2012

«previous

previous article
Week 9-12 | Scooting along
in singapore on 17 October 2012

random!

random article
Quantized Art
in essay on 28 May 2012

 

Justifying Hyphens

in website on 21 October 2012

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.

article image

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
bahanonu [at] alum.mit.edu

additional articles to journey through:

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.

wary statistics #1: the tale of cdc mortality
06 april 2020 | statistics
I will briefly discuss properly interpreting data you might see in the mainstream or on social media. The takeaway: if recent data for some[...] measure (e.g. pneumonia deaths) from this year looks to be different than prior years, make sure to check that it is not an artifact of data collection or compilation.

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.

Manifest Destiny
25 August 2012 | designs

A banner for our Guild Wars 2 group. President Polk helped complete th[...]e original Manifest Destiny. The font is Blackadder ITC and helps maintain the somewhat classical feel. However, the sole use of black, white and red is very modern.

©2006-2024 | Site created & coded by Biafra Ahanonu | Updated 17 April 2024
biafra ahanonu