Lithium reader, can't get it to centre headings

[bookman156]

I really like Lithium reader, it seems to render most CSS and embedded fonts okay, and it works nicely, but I just can't get it to respect 'text-align: center;' on a h1 tag. Looks like you set all the text to either justified or unjustified and that overrides everything.

Am I doing something wrong? Has anyone been able to centre headings on Lithium?

[JSWolf]

We'll need to see samples of the HTML/CSS code.

[bookman156]

Pretty standard stuff:

h1 {
font-size: 2em;
line-height: 1.5em;
font-weight: bold;
text-align: center;
}

It's more whether Lithium reader just doesn't centre text. Or whether anyone else has managed it.

[Quoth]

Could be some other CSS messing up.
I just checked one of our books on Lithium, which I use because it seems to respect CSS etc. Also works well with Calibre and/or SD Card.

All the centred (center) headings are OK.

As an aside, I remove line-height from CSS on any converted ebooks.

[JSWolf]

Originally Posted by bookman156

Pretty standard stuff:

h1 {
font-size: 2em;
line-height: 1.5em;
font-weight: bold;
text-align: center;
}

It's more whether Lithium reader just doesn't centre text. Or whether anyone else has managed it.

You left out the HTML code. And is there any more CSS that's relevant?

[jackie_w]

Every epub reading app (on eink or Android) I've ever used which offers some kind of option to choose between left align (ragged right) or full-justified uses a broadly similar method to enforce the user's choice.

It's always a small piece of override CSS which looks something like one of the following (in descending order of "aggressiveness"):

1. * {text-align:left !important;} (or * {text-align:justify !important;}
2. div, p {text-align:left !important;} (or div, p {text-align:justify !important;}
3. body {text-align:left !important;} (or body {text-align:justify !important;}

The choice of which HTML tags to apply the override to is entirely up to the app developer. Whatever level they choose they will end up delighting some users and upsetting others. Some apps (e.g. KOReader) may give the user a limited choice of how aggressive to be.

If Lithium has opted for the most aggressive override, * {text-align:left !important;}, then there is nothing you can do to prevent your <h1> tagged centred text from being forced to text-align:left/justify if you press the left/justify option buttons. The only way to keep them centred is to leave the 'Text align' option set to 'Original'.

[bookman156]

If Lithium has opted for the most aggressive override, * {text-align:left !important;}, then there is nothing you can do to prevent your <h1> tagged centred text from being forced to text-align:left/justify if you press the left/justify option buttons. The only way to keep them centred is to leave the 'Text align' option set to 'Original'.

It doesn't look to me that Lithium has any way of setting text align to original, it's either justified or unjustified, doesn't seem to be a way of not having one of them chosen, unless I'm missing something staring me in the face.

I just checked one of our books on Lithium, which I use because it seems to respect CSS etc. Also works well with Calibre and/or SD Card.

All the centred (center) headings are OK.

Well that's interesting. I'm going to have to have another look at this.

[JSWolf]

@bookman156 post the entire CSS (in a code block) and the HTML code from the start of the HTML file to the start of the first paragrah (in another code block) so we can have a look and see what's going on.

[bookman156]

You left out the HTML code. And is there any more CSS that's relevant?

I posted what I thought was relevant, but here's the whole of the CSS excluding the embedded font in case I'm missing something. HTML is just standard stuff, h1 wrapping a heading:

body {
font-family: "Dante MT Std", serif;
font-weight: normal;
color: #000000;
margin: 0.5em;
widows: 1;
orphans: 1;
}

h1 {
font-size: 2em;
line-height: 1.5em;
font-weight: bold;
text-align: center;
}

p {
	font-size: 1em;
	line-height: 1.4em;
	text-indent: 1em;
	text-align: left;
	margin: 0;
}

p.space {
    margin-top: 1.2em;
}

p.first {
    text-indent: 0;
    margin-top: 3em;
}

p.noindent {
	text-indent: 0;
}

p.noindentspace {
    text-indent: 0;
    margin-top: 1.2em;
} /* a space, but still part of previous portion of text */

p.noindentspacebelow {
    text-indent: 0;
    margin-bottom: 1.7em;
}  

p.byline {
	font-size: 1.4em;
  	line-height: 1.5em;
  	margin-top: -0.6em;
	font-style: italic;
	text-indent: 0;
	text-align: center;
}

p.epigraph {
    font-size: 1.3em;
    line-height: 1.4em;
    margin-top: 1em;
    text-indent: 0;
    text-align: center;
  }

em {
	font-style: italic;
}

hr.transition {
    margin: 1.5em 40% 1.55em 40%;
    border: 0;
    border-bottom: 1px solid #CCC; 
  }

[bookman156]

Here's the start of the HTML, from Sigil:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title>Blah blah</title>
  	<link href="../Styles/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<h1>Blah blah</h1>

<p class="byline">Blah blah</p>

<p class="epigraph">Blah blah</p>

<p class="first">Blah blah.</p>

[bookman156]

@Quoth

Just looked at your sample of Under the Stone of Destiny in Lithium and your centred headings are left aligned. That's with unjustified button in Lithium. With justified button they're still not centred, but an attempt at justification, ie massive spaces.

I don't see how to look at an epub without one of those two buttons selected.

I'm using Lithium 0.24.1

[Quoth]

I use Lithium on Android because it doesn't overide any CSS.
It displays the same as epub on Kobo or Sony PRS-350

[Quoth]

The sample I just looked at has this CSS for chapter headings.
It's fine on Lithium on Android 8 and Android 5!
Same as full version.
The Sample merely has chapter contents snipped on later chapters.
.block_12 {
display: block;
font-family: "Gaelic", serif;
font-size: 1.41667em;
margin-bottom: 6pt;
margin-left: 0;
margin-right: 0;
margin-top: 22pt;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center
}

5" phone and 10" tablet.

Under Lithium A<cog> option Text Align is "Original"
Ver 0.24.1

[JSWolf]

Originally Posted by bookman156

@Quoth

Just looked at your sample of Under the Stone of Destiny in Lithium and your centred headings are left aligned. That's with unjustified button in Lithium. With justified button they're still not centred, but an attempt at justification, ie massive spaces.

I don't see how to look at an epub without one of those two buttons selected.

I'm using Lithium 0.24.1

Is that the latest version of Lithium? I don't see a version number on Google Play.

[Quoth]

Actually for first item on a page "padding-top" is better than "margin-top".