Typography, the right way with JoliTypo

Most of content on the web are full of typography mistakes—and I will not talk about grammar, that’s another story. Content of your website is like your code, if it’s not well indented, if you don’t put a carriage return in the right place, if you don’t respect code standard and are not rigorous, your code will not be easy to read. That is the same thing for your contents, if you want people to keep reading your blog, stay in your website, you should respect typography rules. I will present you the most important rules I think you should apply in your texts.

Section intitulée rules-to-applyRules to apply

Each language has its own typography rules, it may even have more than one, depending on the country. Here I will mainly speak about American English rules, but also about France french.

Section intitulée spacesSpaces

Section intitulée al-ways-put-ex-actly-one-space-be-tween-sentencesAl­ways put ex­actly ONE space be­tween sentences.

Many people have the habit of putting two spaces between sentences, but guess what? They are wrong. This behaviour can be explained by the “typewriter era”. Typewriters used a wider space (two spaces actually) between sentences than between words as mandated by the styleguide of the era. But nowadays with computers, rules have changed and using two spaces is not necessary. All professional typeset use only one space.

Section intitulée white-space-charactersWhite-space characters

Multiple types of white-space exist, here are the most important used in the web:

• Word space: (space bar) put it between each word, is the usual purpose.
• Non-breaking thin space: ( ) represents half size of a word space, commonly used in French typo before some punctuations.
  Wrong way
  Right way
• Non-breaking space: ( ) use it to prevent awkward breaks between two elements; like between a nu­meric and its unit or ref­er­ence.
• Hard line break: (<br />) put it when you want to move next word in a new line. It is useful when you want to stay in the same paragraph like an address.

32 Gates Ave
Brooklyn, NY 11238
United States

• Carriage return: (<p></p>) use it to delimitate paragraphs.

Section intitulée punctuationsPunctuations

In French, we add a non-breaking thin space before ? , ! and ;. And a non-breaking space before :. Whereas in English, we don’t add any space before these symbols.

Section intitulée always-use-curly-quote-for-apostropheAlways use curly quote for apostrophe

Straight quote ' is the symbol everyone use by mistake in contractions or to indicate possession. But the right character is the curly one ’; which look much better no? The problem is that we don’t have this symbol on our keyboard.

Section intitulée smart-quotesSmart quotes

Smart quotes have an opening double quote and a closing double quote, not just straight double quotes ". Their representation differs depending on the country. In France, we use guillemets « … », in Germany, we use „…“, and in England, it’s “…” for example.

Section intitulée hyphenHyphen

We use hyphen - to break word in justified texts at the end of a line. Algorithms exist to split a word in good way, in order to not split it in center of a syllable.

Section intitulée ellipsisEllipsis

The ellipsis is often wrongly represented by typing three successive dots, but space between them is either too small or too big. The right way to symbolize the ellipsis is to use the ellipsis character ….

Section intitulée trademarkTrademark

In some word processing software, when you type (c), (r) and (tm), they are replaced automatically by the copyright ©, the registered trademark ® and trademark ™ symbols. However, some people continue to use this parenthesis syntax even when they are not replaced. You can directly type these symbols with keyboard shortcuts:

An editor / blogger / client don’t necessarily know these rules, they are different depending on the country and the language that make it more difficult if your site is multilanguages. That’s where JoliTypo comes in.

Section intitulée jolitypoJoliTypo

JoliTypo is a library created by Damien ALEXANDRE in order to correct typing errors, as we seen previously, depending on the locale. The library is written in PHP and very easy to install. We use it in production for several of our PHP projects. I suggest you to look at the documentation which is complete with all available fixers.

Take this paragraph:

"We're going to do this as scientists , and we'll save some elephants in the meantime." You know? Currently , drone operators must watch live video feed to detect intruders ,and it is all too easy to miss the poachers. We were told to go find people in this vast area based on no intelligence -- it was an absolute waste of time...  JoliCode (c)

Let see how to fix this text:

use JoliTypo\Fixer;

$fixer = new Fixer(array('Ellipsis', 'Dash', 'SmartQuotes', 'NoSpaceBeforeComma', 'CurlyQuote', 'Trademark'));
$fixer->setLocale('en_GB');
$fixed_content = $fixer->fixString($content);

Here, we specify fixers we want to apply, set the locale and we call the fixString function to correct the text. That’s it.

This is the result:

“We’re going to do this as scientists, and we’ll save some elephants in the meantime.” You know? Currently, drone operators must watch live video feed to detect intruders, and it is all too easy to miss the poachers. We were told to go find people in this vast area based on no intelligence—it was an absolute waste of time… JoliCode ©

You can see precisely the diff between both here:

"We're“We’re going to do this as scientists ,scientists, and we'llwe’ll save some elephants in the meantime."meantime.” You know? Currently ,know? Currently, drone operators must watch live video feed to detect intruders ,andintruders, and it is all too easy to miss the poachers. We were told to go find people in this vast area based on no intelligence -- itintelligence—it was an absolute waste of time...time… JoliCode (c)©

As you can see, JoliTypo will improve and standardize the content of your pages. That will make your text more pleasant to read.

You can try it yourself! http://jolitypo-demo.herokuapp.com/

You can also add your custom Fixer and contribute!