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
Filugori Reboot
in filugori on 15 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

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!

guild wars 2 chef excel guide
08 september 2012 | guild wars 2
The chef's ingredients are scattered throughout the Guild Wars 2 map, but the profession is a cheap way to get 10 levels quickly. Because I[...] am OCD and would rather not read text when I can browse a spreadsheet, compiled information from a couple of sources that is more easily searchable.

satellite-based videos: eastern europe during the russia-ukraine conflict
30 november 2022 | satellite
To visualize the nighttime lights of Eastern Europe, with a focus on times before and after the ongoing Russia-Ukraine conflict, I updated [...]my geoSatView R code originally built to view forest fires in the west coast of the United States to use satellite data from VNP46A1 and other datasets collected from the Suomi NPP VIIRS satellite.

I then created higher-quality movies in MATLAB by using the VNP46A2 Black Marble dataset collected by the same satellite, which has reduced cloud and other artifacts due to additional data processing. This allowed me to quantitate a permanent reduction in nighttime lights within Ukraine (in line with my initial hypothesis) and identify a multi-stage reduction of nighttime lights in Kiev's outer neighborhoods/metropolitan area that was greater than that seen in the city core/center. This highlights the utility of public satellite data to quickly test hypotheses and visualize large-scale changes.

I will go over how the Black Marble dataset is collected and processed along with how I created the movies and the advantages/disadvantages of each data source.

Using this platform and codebase, in follow-up posts I will look at 2021 Texas power crisis during the winter storms, vegetation changes in deforested areas or after conservation efforts, and other events.

interstellar review: was this the final cut?
17 december 2014 | movies
A review of Christopher Nolan's latest movie Interstellar. To put it briefly, rarely has a movie so vastly deviated from my expect[...]ations going in. And not in a good way.

©2006-2025 | Site created & coded by Biafra Ahanonu | Updated 21 October 2024
biafra ahanonu