File last modified on August 18, 2022

CSS General

When an ePub is exported from InDesign by default the CSS file is named idGeneratedStyles.css and placed in a directory named css. While there is no issue with the naming convention of the ePub's styles file our default styles, epub3.css, should go below the referenced file, example:

html
1<head>
2  <title>Foo Bar</title>
3  <link href="../css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
4  <link href="../css/epub3.css" rel="stylesheet" type="text/css" />
5</head>

Clean CSS

When first working on an ePub run the clean-css.scpt to remove any declarations we do not use.

Empty CSS

Empty CSS declarations should be removed, example: .foobar {}, use regex to find them:

bash
1## Find:
2(?<=}\n)^(\D+|)(\.|#)([A-Za-z0-9_-].*) \{(\s+|)\}\n
3
4## Replace:

@page

@page is a printing rule. Since all of our distributed ePubs are DRM'd the files within the ePub cannot be printed so the @page should be removed:

css
1@page {
2  margin: 0px 0px 0px 0px;
3}

regex command to remove @page:

bash
1## Find:
2^@page \{\s+margin :( \d+px){4,};\n\}\n
3
4## Replace:

Font Family

font-family should have a generic name applied, example:

css
1font-family: 'Foo Bar', serif;

Font Source

Font source should include the format, example:

OpenType

css
1src: url('../font/foobar.otf') format('opentype');

BBEdit regex command:

bash
1## Find:
2(?<=\.otf"\));$
3
4## Replace:
5 format('opentype');

TrueType

css
1src: url('../font/foobar.ttf') format('truetype');

BBEdit regex command:

bash
1## Find:
2(?<=\.ttf"\));$
3
4## Replace:
5 format('truetype');

Widths

Forced widths should be replaced with percentages or ems because they do not work well in responsive ePubs, example: width:300px; should be width:30%; or width:3em;.

Inline Styles

Do not use inline styling, example:

html
1<p style="color:#ffcc00;">This is text with the color applied</p>

Always add styling to the external stylesheet, in this instant that would be within file idGeneratedStyles.css, example:

css
1.colored {
2  color: #ffcc00;
3}

in the XHTML file:

html
1<p class="colored">This is text with the color applied</p>

Color Black

By default InDesign will export the color black (#000000;) for all styles:

css
1.foo {
2  color: #000000;
3  font-family: 'Source Sans Pro', sans-serif;
4  font-size: 0.75em;
5  font-style: normal;
6  font-variant: normal;
7  font-weight: normal;
8  line-height: 1.2;
9  margin-bottom: 0;
10  margin-left: 0;
11  margin-right: 0;
12  margin-top: 0;
13  orphans: 1;
14  page-break-after: auto;
15  page-break-before: auto;
16  text-align: left;
17  text-decoration: none;
18  text-indent: 0;
19  text-transform: none;
20  widows: 1;
21}

This declared color causes issues in apps like iBooks and impedes night mode by turning all text to black. When this is present in the CSS it should be removed, regex:

bash
1## Find:
2^\tcolor:#0{3,6};\n
3
4## Replace:

Result:

css
1.foo {
2  font-family: 'Source Sans Pro', sans-serif;
3  font-size: 0.75em;
4  font-style: normal;
5  font-variant: normal;
6  font-weight: normal;
7  line-height: 1.2;
8  margin-bottom: 0;
9  margin-left: 0;
10  margin-right: 0;
11  margin-top: 0;
12  orphans: 1;
13  page-break-after: auto;
14  page-break-before: auto;
15  text-align: left;
16  text-decoration: none;
17  text-indent: 0;
18  text-transform: none;
19  widows: 1;
20}

Hex by 6

Colors referenced should be in 6 digit hex, example:

css
1color: #939598;

White should be coded from #fff to #ffffff.

Black should be coded from #000 to #000000.

Duplicate Declarations

Replicated styles that use the same declarations should be removed and one style should be made, example:

css
1.index_lvl_1 {
2  font-family: 'Source Sans Pro', sans-serif;
3  font-size: 0.667em;
4  font-style: normal;
5  font-variant: normal;
6  font-weight: normal;
7  line-height: 1.25;
8  margin: 0 0 0 18px;
9  orphans: 2;
10  page-break-after: auto;
11  page-break-before: auto;
12  text-align: left;
13  text-decoration: none;
14  text-indent: -18px;
15  text-transform: none;
16  widows: 2;
17}
18.index_lvl_2 {
19  font-family: 'Source Sans Pro', sans-serif;
20  font-size: 0.667em;
21  font-style: normal;
22  font-variant: normal;
23  font-weight: normal;
24  line-height: 1.25;
25  margin: 0 0 0 27px;
26  orphans: 2;
27  page-break-after: auto;
28  page-break-before: auto;
29  text-align: left;
30  text-decoration: none;
31  text-indent: -18px;
32  text-transform: none;
33  widows: 2;
34}

If the only difference between declarations is a few lines the CSS can be consolidated, example:

css
1.index_lvl_1,
2.index_lvl_2 {
3  font-family: 'Source Sans Pro', sans-serif;
4  font-size: 0.667em;
5  font-style: normal;
6  font-variant: normal;
7  font-weight: normal;
8  line-height: 1.25;
9  margin: 0 0 0 18px;
10  orphans: 2;
11  page-break-after: auto;
12  page-break-before: auto;
13  text-align: left;
14  text-decoration: none;
15  text-indent: -18px;
16  text-transform: none;
17  widows: 2;
18}
19.index_lvl_2 {
20  margin: 0 0 0 27px;
21}

Unused Styles

Any styles that are not used should be removed from the stylesheet. Within BBEdit's Multi-File Search (shorthand: ⇧⌘F) scoped to the project under Projects with the box checked (☑) the CSS can be extracted with the Extract button using the regex:

bash
1## Find:
2class="[A-Za-z0-9_-]*"

This will generate a new BBEdit file with all the classes. To process the duplicates under BBEdit go to Text > Process Duplicate Lines... A prompt will appear with the settings:

BBEdit Duplicate Lines

Click the button Process and all the duplicates should be removed from the file. With the consolidated file navigate through your CSS to review if any styles exist.

This will also assist in finding any names with overrides that should be replaced with something better, example:

Multi-Search output from file consolidated:

html
1class="CharOverride-1"

CSS:

css
1span.CharOverride-1 {
2  font-family: 'Sabon LT Std';
3  font-style: italic;
4}

XHTML conversion:

html
1<span class="italic"></span>

CSS:

css
1.italic {
2  font-style: italic;
3}

It is assumed that the <p> tag class declares the font. If the font from the p class matches the font-family declared in the span then the font-family can be removed from the span.

Dropcap

Sometimes InDesign will create ._idGenDropcap-X. This can either stay but it's a good practice to rename, example:

before:

css
1._idGenDropcap-1 {
2  float: left;
3  font-family: 'Wheat', sans-serif;
4  font-size: 5.189em;
5  font-style: normal;
6  font-weight: normal;
7  line-height: 1;
8  margin-bottom: -0.2em;
9  margin-right: 0.05em;
10  margin-top: -0.102em;
11}

after:

css
1.dropcap {
2  float: left;
3  font-family: 'Wheat', sans-serif;
4  font-size: 5.189em;
5  font-style: normal;
6  font-weight: normal;
7  line-height: 1;
8  margin-bottom: -0.2em;
9  margin-right: 0.05em;
10  margin-top: -0.102em;
11}