Please don’t Justify me!

Image for Please don’t Justify me!

The configuration setting for iBooks has Full-Justification switched on

Image for Please don’t Justify me!

This is how things should look. The main body text is left aligned but the headings are set to be aligned in the centre.

Image for Please don’t Justify me!

The user selects a different font. The paragraphs change but the heading does not.

Image for Please don’t Justify me!

Horrible things happen to when text is justified

In the iBooks app on the iPad the user has control over the justification. Well, that is, by default justification is turned on. Users can turn that off - but they probably don't! ‘cos they don‘t know where to find it.

How can eBook designers get the kind of alignment they prefer, and make the eBook stay like that?

furthermore...

There is good news and bad news.

The bad news is that you cannot guarantee that the body text will not be justified. In other words, if you want left aligned body text (even when the user settings say justified), you can achieve this but there is a loophole that allows the user to change it to their own setting (even if they don't really want it).

The steps to (almost) achieving non-justified text

1. The first thing we need to do is to switch on embedded fonts

I should make it clear though, that if your target platform is Apple iOS/iBooks then you don't actually need to embed the font as long as it exists on the device. To discover the full range of fonts available within iBoooks on iOS, then go here.

Now, there are 2 ways to switch on the font embedding (OK, let's call it the use my fonts setting).

For ePub2 you need a new file inside the ePub package called:

com.apple.ibooks.display-options.xml

This needs to be inside the folder called META-INF and in this file the text should read:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
<platform name="*">
<option name="specified-fonts">true</option>
</platform>
</display_options>

If you plan to move with the times and conform to the ePub3 standard, then do NOT add the above file at all but, instead add to the .opf file (often called package.opf or content.opf) the following:

at the head of the file right after the XML declaration:

<package xmlns="http://www.idpf.org/2007/opf" prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/" unique-identifier="bookid" version="3.0">

Then inside the metadata section:

<meta property="ibooks:specified-fonts">true</meta>

With one or other* of these settings, iBooks / iPad will respect your choice of fonts in the CSS. Proof of this working will be the option ‘Original’ at the top of the list of selectable fonts (see image here).

*note. the second method above will only work in iBooks 3.0 or above.

2. The HTML markup

The next important element to get this working correctly, is to markup the HTML so as to differentiate between headings and body text. You should be doing this already, but InDesign users, may have lazily left the auto tagging feature to markup the headings as paragraphs (eg: <p class="heading">[yuk]. So, be sure that heading are tagged <h1> through to <h6> and the paragraphs marked up as <p>. This is really important!

3. The Styles defined in the CSS

If you really have embedded fonts then you will need to use the @font-face rule to define the whereabouts of the font file. This might look like this:

@font-face {
font-family: 'AlegreyaRegular';
src: url('fonts/Alegreya-Regular.otf') format('opentype');
font-weight: normal;font-style: normal;
}

If you intend to use a font already available on the Apple iOS device then this will not be required.

To use the font within the eBook, you then need to select this font-family for each element. We are also trying to control the text alignment so we can add these rules at the same time:

h1 {
font-family : Optima-Regular;
text-align:center;
}

and for the paragraphs, maybe:

p.bodytext {
font-family : Cochin;
text-align:left;
}

By default, the eBook will display with these fonts and with this alignment, even if the user has justified text switched on. When the user selects a different font from the available fonts within the iBooks app, then something interesting happens; the paragraph body text font will change to their choice of font and the justification will also change to their system settings. The headings will remain as the font and alignment chosen by the designer.

So, to summerise the issues:

  1. Switch on the font embedding
  2. Make sure the headings are marked up using proper heading tags
  3. Put the font choice in the rules for each of the elements in the CSS (note, it is not enough to simply define the font choice in the parent element like the body).
  4. Put the alignment choice in each of these elements also. You can guarantee that the heading alignments will be respected, but the paragraph alignment will change when the user chooses a different font.

Posted on 22 Nov around 6pm

Tags:

Commenting is not available in this channel entry.