How to underline all <h2> tags?

[crankypants]

I started trying to change the formatting in CSS to make all <h2> tags underlined, but I'm using EPUB2 readers, and the text-decoration command is for CSS3, and EPUB3.

So, is there another way to automatically underline all <h2> rules without having to change the actual XHTML?

Thanks.

[theducks]

Originally Posted by crankypants

I started trying to change the formatting in CSS to make all <h2> tags underlined, but I'm using EPUB2 readers, and the text-decoration command is for CSS3, and EPUB3.

So, is there another way to automatically underline all <h2> rules without having to change the actual XHTML?


Thanks.

In the CSS

h2 {text-decoration: underline; }

[Toxaris]

Originally Posted by crankypants

I started trying to change the formatting in CSS to make all <h2> tags underlined, but I'm using EPUB2 readers, and the text-decoration command is for CSS3, and EPUB3.

So, is there another way to automatically underline all <h2> rules without having to change the actual XHTML?

Thanks.

The text-formatting was actually already present in CSS1 (see also here). They redefined it for CSS3, but it works fine in ePUB2.

[crankypants]

Originally Posted by Toxaris

The text-formatting was actually already present in CSS1 (see also here). They redefined it for CSS3, but it works fine in ePUB2.

So it must be my ereaders then? I use Moon Reader Pro for Android and EPUBReader on Firefox/Windows 7. Has anyone gotten text-decoration to work on Moon Reader Pro or EPUBReeader for Firefox?

[Toxaris]

Are you sure there are no errors in your stylesheet? Does it look similar as the example Doitsu posted?

[HarryT]

Moon+ Pro essentially ignores the CSS in your book and applies its own instead. Try an ADE-based viewer.

[Doitsu]

Originally Posted by crankypants

So it must be my ereaders then? I use Moon Reader Pro for Android

The current version of Moon+ Reader for Android actually supports:

h2 {text-decoration: underline; }

If it doesn't work, you've most likely forgotten to link the stylesheet in Sigil

Originally Posted by crankypants

EPUBReeader for Firefox?

EPUBReader for Firefox has only minimal ePub2 support and is ill-suited for testing ePub books.

For testing purposes, you may want to install Bluefire Reader for Android, because it uses the same ADE/RMSDK engine that the default apps of most eInk epub readers are based on.

IMHO, underlining headings is a bad idea, because many readers might assume that underlined headings are back-linked to the TOC.

Of course, if you back-link headings, they'll be automatically underlined (without a CSS rule).

[HarryT]

Originally Posted by Doitsu

IMHO, underlining headings is a bad idea, because many readers might assume that underlined headings are back-linked to the TOC.

Agreed. "Underline = hyperlink" is too ingrained in people now.

[crankypants]

Here's my style sheet in a CSS file:

/* HTML tags */
h1 {text-align:center;}

h2 {text-decoration:underline;
    text-decoration-style:solid;
}

h4 {text-decoration:underline overline;
    text-decoration-style:solid;
}

I'm not using Sigil, I'm using a program called Mkepub that I created. The CSS stylesheet is in the EPUB. My first test is to test with the EPUB wiht EPUBreader, but underlines are not showing.

Is there a Firefox EPUB reader plugin that supports underlining that is ADE-based?

Thank you.

[dgatwood]

Things to try:

1. Unzip the EPUB and open the relevant page in Chrome. (If Chrome doesn't show the underlining, then neither will many eBook readers, as many readers are based on WebKit, and Chrome is based on Blink, which forked from WebKit.)
2. Run CSSLint on the CSS file. (If the CSS file contains any actual parsing errors, many eBook readers—particularly those based on ADE/RMSDK—will ignore the stylesheet entirely.)
3. Run a validator on the EPUB. (And if the EPUB doesn't validate, many eBook readers will keel over.)

[crankypants]

Well, it appears the XHTML files do not include the CSS files. I thought the ereader handled that. Here's a sample XHTML header.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>My Test Title</title>
</head>
<body>

I will have to put a reference to the CSS file in each XHTML file now thten get back to you all.

EDIT: Yep, that was it. I forgot to add the style sheet to each XHTML file, since I'm making my own program. EPUBreader supports solid underlines, dashed, dotted, and 'underline overline'. I haven't tested anything else yet. It also supports 'text-align:center' for centering.

New hdr in every XHTML file:

<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>My Test Title</title>
<link rel="stylesheet" type="text/css" href="../styles/style01.css"/>
</head>
<body>

Thank you!

[Toxaris]

The reader cannot handle that, since there may be multiple stylesheets which can be used in different XHTML files.

[HarryT]

Originally Posted by Toxaris

The reader cannot handle that, since there may be multiple stylesheets which can be used in different XHTML files.

... And all this stuff originated with websites, where the CSS could be quite literally anywhere!