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
Why you should watch Black Mirror
in television on 29 November 2015

 

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:

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!

¿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.

singapore: final report
16 september 2012 | singapore
Before finishing my adventures in Singapore, I was asked to put together a final report describing my experiences and where the program cou[...]ld improve. Rather than bore you with details, I've included a link to download the report. This is a draft form and I'll update the link with a finished version in the future.

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.

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