These uncentered section breaks are driving me nuts…

[twowheels]

It’s probably a bit extreme to be so bothered by this, but it is bothering me.

I assume that this is the crengine’s doing, and maybe it’s because of the odd number of characters, but is there any way to improve this centering? Maybe I can add some custom css?


https://imgur.com/a/OesiJCY

[Jellby]

Pretty sure the "center" class is missing a "text-indent: 0", so it has some (default or inherited) indent.

[twowheels]

Interesting observation — I might try some custom CSS on the center class to see if I can improve that — or a negative indent as there doesn’t seem to be much else centered in this book.

[JSWolf]

Try the following CSS code. It should work.

.sectionbreak {
margin-top: 0.8em;
margin-bottom: 0.8em;
text-align: center;
text-indent: 0;
}

[twowheels]

Originally Posted by JSWolf

Try the following CSS code. It should work.

.sectionbreak {
margin-top: 0.8em;
margin-bottom: 0.8em;
text-align: center;
text-indent: 0;
}

Doesn’t that assume that there’s already a CSS class named sectionbreak? I don’t see that in the HTML that I took a picture of. That said, I’m a C++ developer and don’t do much with CSS, so maybe I’m missing something really obvious.

[twowheels]

So, I changed p.center to be left aligned and it was not quite left aligned, no matter how I tried to play with margin/border/padding, whether explicit zero values or reset/unset. I did find, though, that if I used the HTML5 (html5.css) built-in style instead of the HTML/EPUB (epub.css) that it centers much closer to where I’d expect it to be. I’ll review those two CSS files when I get time and access to a real computer, but it looks like it’s something in the KOReader CSS files that’s doing this.

[Frenzie]

Originally Posted by twowheels

Doesn’t that assume that there’s already a CSS class named sectionbreak? I don’t see that in the HTML that I took a picture of. That said, I’m a C++ developer and don’t do much with CSS, so maybe I’m missing something really obvious.

I think that's intended as "yourclassnamehere".

[twowheels]

OK, I figured it out by cloning the github repo and looking through the css files.

In epub.css (unlike html5.css) I found this:

/* Block elements */
p {
    text-indent: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
}

So, it seems that it's text-indent that's causing it. So, I put in a book-specific style tweak that says:

p.center {
  text-indent: 0;
}

...and it's now properly centered.

I'm wondering whether this is something that should be in the global css file, or whether the text-indent should be removed from the global paragraph style -- I mean, coolreader base already handles margins, right?

As a follow-up test, as I was typing this, I changed the above p.center to just p in my book-specific style tweak and the dots stayed centered and I didn't see any change to the margins, so I'm even more inclined to believe that the text-indent should just be removed from the global paragraph style.

[JSWolf]

delete post

[JSWolf]

Originally Posted by twowheels

OK, I figured it out by cloning the github repo and looking through the css files.

In epub.css (unlike html5.css) I found this:

/* Block elements */
p {
    text-indent: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
}

So, it seems that it's text-indent that's causing it. So, I put in a book-specific style tweak that says:

p.center {
  text-indent: 0;
}

...and it's now properly centered.

I'm wondering whether this is something that should be in the global css file, or whether the text-indent should be removed from the global paragraph style -- I mean, coolreader base already handles margins, right?

As a follow-up test, as I was typing this, I changed the above p.center to just p in my book-specific style tweak and the dots stayed centered and I didn't see any change to the margins, so I'm even more inclined to believe that the text-indent should just be removed from the global paragraph style.

That's not correct. you would lose indents for <p> and that means you would need to do <p class="somedumbuneededclass"> to get indents. It's best to just use <p>. Every class with a center should have a text indent of 0. It's good programming.

[NiLuJe]

c.f., the links in https://github.com/koreader/koreader...ent-1423005535 for the reasoning .