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
Quotes from "The Right to Pain Relief and Other Deep Roots of the Opioid Epidemic"
in books on 02 November 2023

 

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

more articles to enjoy:

on the subject of something: reviving an old website
12 may 2015 | website
On the Subject of Something was my original blog during high-school and early college. My Opera (the site it was hosted on) closed down and[...] I was unaware of this fact during the grace period during which they allowed users to export the content from their website. However, I am extremely grateful to the Internet Archive: Wayback Machine, which allowed me to recover many of the webpages. I've included links to all the relevant posts that I could recover. Enjoy!

filugori reboot
15 may 2012 | filugori
Several months ago I took a hard look at Filugori: The Long Tale, the story I started in grade school that was meant to be a mash-[...]up of my favorite books and fictional universes. However, it lacked a certain vision. The story was fun, frantic and fanciful, but there was no heart. It lacked cohesion and the universe did not appear to justify its own existence. Why should someone care to read this tale? What would they gain from it? While fleshing out the background of the universe, providing details on the four major epochs that define the story, I came to realize that I wanted to tell a very different tale than originally planned.

geosatview: creating videos from satellite data
14 september 2020 | satellite
I created geoSatView back in 2018 to visualize fires on the West Coast of the United States. This entry briefly discusses [...]geoSatView along with providing example videos and links to the code.

¿qué es la calle?
24 may 2013 | short story | spanish
Había terminado y salé para mi cocina. Tenía hambre pero este día no había comida dentro de mi despensa. Me fui y caminé hacienda[...] la Tport—una máquina que puede transportar una persona a otro lugar sin energía y tiempo. Cuando entré la máquina, toqué algunos botónes y esperé. Pero nada ocurrió y lo hice las mismas acciones otra vez—y nada ocurrió.

How would the disappearance of streets affect the social fabric? This short story briefly (in castellano!) explores a world in which instantaneous, free transport is possible. Meant mainly to practice my spanish, i plan to follow-up with a more detail story in the future.

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