Add a unique Class Name to the Body Tag in your ePub Chapters

Image for Add a unique Class Name to the Body Tag in your ePub Chapters

Dreamweaver search with regular expressions

Image for Add a unique Class Name to the Body Tag in your ePub Chapters

Using BBedit GREP

Edit: InDesign CC 2014 adds an ID value to the <body> tag, so if you have the latest version you will not need to use the method described in this article. When you export to ePUB, now, InDesign will add something like the following for the <body> tag:

<body id='dream-102' lang='en-GB' xml:lang='en-GB'>

The #dream-102 in this case is unique to page 102 in this eBook. Brilliant, we can now target each page individually with our CSS!

----------------- Continue reading if you have an earlier version of InDesign ------------

This GREP will help you add a class name to the body tag – like this

<body class="page3">

You know – so you can add some special CSS styles to each chapter in the eBook you just exported from InDesign.

Or maybe for each page – if you are making a fixed layout ePub.

furthermore...

So, we export an ePub from InDesign and we get a CSS file linked up to each and every chapter / XHTML document.

We can even create our own CSS and add in to the export advanced panel. This is all good, because we get consistency throughout the eBook.

But how about if we want a different style rule for each chapter; perhaps a different font-size for the endnotes or different colour on the chapter heading.

Since it is always best to keep our style rules in a linked CSS file, we can target individual elements inside HTML documents by utilising the parent <body> tags in those documents. When we export from InDesign each seperate HTML document is a 'chunk' of the ePub and is controlled when we determine that a particular heading style will 'split for ePub'. Unfortunately InDesign does not automatically add a class name to the <body> tag. Here is an example from the top of a typical HTML page within an ePub generated by InDesign:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>msnd_fl_ex_nv-15</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
<link href="css/dream_fe.css" rel="stylesheet" type="text/css" />
</head>
<body id="msnd_fl_ex_nv" xml:lang="en-GB">

Notice that the content in the <title> tag includes a number. This represents the chapter number or the page number if we are building fixed-layout. We can make use of this in a GREP search and replace. We want to get this in the body tag - <body class="page15" .....

Before I hand out to you the GREP formula, be aware that the syntax will vary according to your choice of software!

In DreamWeaver here it is:

We use ‘Find and Replace’ > select ‘Regular Expression’ and use the following find:

(<title>.+?)(\d+?)(</title>(.|\n|\r)*?<body)

and the following Replace:

$1$2$3 class="page$2

Of course we should conduct this across the whole site within Dreamweaver.

The result is:

<body class="page15" id="msnd_fl_ex_nv" xml:lang="en-GB">

Now we can add to our CSS, something like this:

body.page15 h1.chapterhead {
color:#3a1aff;
}

or in a fixed layout eBook

body.page15,body.page17,body.page19,body.page21 {
background-image:url(.../images/flower.jpg);
background-position:top right;
background-repeat:no-repeat;
}

body.page14,body.page16,body.page18,body.page20 {
background-image:url(.../images/flower.jpg);
background-position:top left;
background-repeat:no-repeat;
}
 

Posted on 13 Mar around 9pm

Tags:

Commenting is not available in this channel entry.