Spacing my Guillemets
Figure 1. Good spacing achieved between the word and it's Guillemets
Figure 2. Here we see the non-breaking space in InDesign
Figure 3. Many white spaces are available in InDesign
Figure 4. Not all fonts can use the non-breaking thin space.
Figure 5. Large spaces between the Guillemet and the word because of the justification
What fun to get the correct spacing for this particularly French punctuation in a reflowable eBook!
« Viva la France »
The Guillemet is used in more than just the French language, but a problem arises when needing to use in an eBook, becasue it is traditional to have a space between it and the word that is being quoted. This is not the case with the curly quotes used in the English language; they, in comparison, simply surround the word with no space.
Why can't we simply have an empty space, after the word and before the word?
3 reasons actually:
- First of all typographic purists will know that this is no ordinary space; it is a thin space. Usually 1/8 of the normal word space.
- The next problem is that we do not want to allow the Guillemet and the word to be broken over a line. An ordinary space allows the line to break there if needed—don't forget this is a reflowable eBook.
- Finally, in a justified block of text, the spaces are fluid; the algorithm for text-align:justify will adjust the space between words, making our space inconsistent.
Is there a solution? And will it work in the ePub format for any or most devices?
furthermore...
The solution is more complex that one might first suppose, and it really depends on how we create our ePubs in the first place.
InDesign may be our first stage in the workflow.
If you are working from assets already set up for print then InDesign does have the ability to insert a 'thin space' (Figure 2.) Indeed, it can aslo insert spaces of various thicknesses. (Figure 3.)
However, all of these will simply be exported into the ePub as single spaces, apart from the non-breaking space. This will become the character entity:
 
We could be content with this, except that it will be to big a space. It will be a word-space. We need something narrower.
There is such a thing as a thin-space HTML entity:
 
However, this will permit a break. One possible resolution would be to wrap this in a span tag and then force it to not break. Like this:
<span style="white-space: nowrap;"> </span>
After some experimenting, I can confirm that this does not work reliably in an ePub and the lines may break, making an occasional lonely Guillemet.
Again more research and we find that there is thin non-breaking character entity. This looks hopeful. The entity is this:
 
I thought I was onto a winner with this one, but sad to report that it only works with some fonts! See Figure 4.
Back to the more reliable non-breaking space, but how to make it narrower than a normal word space.
CSS will help (or will it?)
If we wrap the non-breaking character in a span tag and give this a class name, we can then modify our CSS within the ePub to give it a narrower width. An example of the XHTML should look like this:
«<span class="thinSpace"> </span>Je discutais...
Then the CSS:
span.thinSpace {
width: 0.125em;
}
The Final Frontier
So much for the theory. In practise we find another problem, and this occurs when we are using justified text. (Figure 5.)
You see, justified text is achieved by spacing the words out across the line and we might be surprised to see, in spite of our CSS effort above, the spaces after and before our Guillemets seem to vary. Yes, the justify algorithm takes precedence over our width setting in the CSS. Can we turn this off for one space?
After some blind alleys, we seem to have found a trick that works—set the style of the space to be preformatted. Thus:
span.thinSpace {
width: 0.125em;
white-space:pre;
}
The result is good for iBooks, both iPad and MAC. (Figure 1.)
Edit (2/1/15): I have tested the ePub with Adobe Digital Editions and Readium, and all is well.
However, I am now abandoning this approach for Kindle, because on conversion to the Mobi/KF8 format, there are 2 things that go wrong:
- The non-breaking space does not behave reliably
- The attempt to fix the width of the non-breaking space does not work, so in a justified block the space is of variable width. It could work in left-algned text, but I cannot recommend justified in the Kindle format.
Posted on 29 Dec around 5pm
Tags: CSS • eBooks • Ideas • Typography