Koreader 2019.08 doesn't center image due to text-align: center

Norbi24 · 08-29-2019, 10:01 AM

Hi guys,
Although this is a very very minor thing, I have a book (epub) where each chapter heading consists of an upper image, text and lower image, and all of them are centered by the text-align: center directive in CSS. Look at the first image how it looks like in KOReader (Android build) (1st image) and for comparison, in some other app and also in Calibre:

Click image for larger version

Name: koreader.png
Views: 337
Size: 208.4 KB
ID: 173158

Click image for larger version

Name: fbreader.png
Views: 268
Size: 574.5 KB
ID: 173159

I saw that you do a lot in improving the CSS/HTML rendering in crengine, so thought perhaps you would be interested in this as a test case.

According to this discussion I believe that text-align should be applied also to images, not only texts:
https://stackoverflow.com/questions/...t-align-center

Frenzie · 08-29-2019, 10:45 AM

It actually centers the image in legacy, flat, and book. Not in web.

I'd be inclined to suspect something like (inline-)block more than text-align.

Edit: I can confirm that it works fine if you minimize it to just a text-align testcase. I don't have time to figure out where the problem comes in precisely though. I'm not sure if inline-block is actually supported; it could be as simple as that.

Simplified test:

Code:

<!DOCTYPE html>
<html>
<head>
<title>The Author</title>
</head>
<body>
<div class="chapter-title" style="text-align:center"><div class="chapter-title-decoration-above"><div class="chapter-title-decoration-above-inner"><img alt="image" class="chapter-title-decoration-above" src="./OEBPS/Images/chapter_title_above.png"/></div>
</div>
<h1 class="chapter-title">The Author</h1>


<div class="chapter-title-decoration-below"><div class="chapter-title-decoration-below-inner"><img alt="image" class="chapter-title-decoration-below" src="./OEBPS/Images/chapter_title_below.png"/></div>
</div>
</div>
<p class="first-in-chapter"><span class="first-chapter-phrase"><span class="first-in-chapter character-s">S</span>TEPHEN BUTLER LEACOCK</span>(December 1869 – March 1944) was born in England and moved to Canada when he was six years old. He became a Canadian teacher, political scientist, writer, and humorist.</p>
<p>Early in his career, Leacock turned to fiction, humour, and short reports to supplement (and ultimately exceed) his regular income. His stories, first published in magazines in Canada and the United States and later in novel form, became extremely popular around the world. It was said in 1911 that more people had heard of Stephen Leacock than had heard of Canada. Also, between the years 1915 and 1925, Leacock was the most popular humorist in the English-speaking world. </p>
<p>Leacock died of throat cancer in Toronto in 1944. A prize for the best humour writing in Canada was named after him, and his house at Orillia on the banks of Lake Couchiching became the Stephen Leacock Museum.</p>
</body>
</html>

Norbi24 · 08-29-2019, 11:18 AM

Quote:

Originally Posted by Frenzie

It actually centers the image in legacy, flat, and book. Not in web.

Wow, you are right, as I changed for book, but also legacy and flat, it works perfectly fine ... have just set book as a default per long tap ...

I am a little overwhelmed by so much setting possibilities

Thanks, Norbert

Frenzie · 08-29-2019, 12:43 PM

The problem is indeed the lack of support for inline-block. A regular block + fixed width will just be a restricted width starting at the left unless otherwise specified.

lumpynose · 08-29-2019, 02:16 PM

There's a thing with tables where you set margin-left and margin-right to auto; would that help here?

Frenzie · 08-29-2019, 03:56 PM

A regular display:block with something like margin:0 auto should also work, yes. Firefox didn't support it until version 4; that was a thorn in my eyes since '03 or so when Opera added support. I'm somewhat double surprised to see it in an EPUB and used for this purpose though.

lumpynose · 08-29-2019, 04:06 PM

I think I saw it on w3schools.com.

Frenzie · 08-29-2019, 05:07 PM

Pardon, by "it" I meant "inline-block" used this way, not auto margin.

08-29-2019, 10:01 AM	#1
Norbi24 Connoisseur Posts: 64 Karma: 144 Join Date: Aug 2019 Device: Tolino Vision HD4, BOOX Poke2	Koreader 2019.08 doesn't center image due to text-align: center Hi guys, Although this is a very very minor thing, I have a book (epub) where each chapter heading consists of an upper image, text and lower image, and all of them are centered by the text-align: center directive in CSS. Look at the first image how it looks like in KOReader (Android build) (1st image) and for comparison, in some other app and also in Calibre: I saw that you do a lot in improving the CSS/HTML rendering in crengine, so thought perhaps you would be interested in this as a test case. According to this discussion I believe that text-align should be applied also to images, not only texts: https://stackoverflow.com/questions/...t-align-center Last edited by Norbi24; 08-30-2019 at 03:37 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
timefmt, align="center", find replace	Kirk Vomit	Recipes	0	04-11-2012 05:03 AM
Center align text in epub	virtual_ink	ePub	23	08-31-2011 06:27 AM
image be in the center	yuxi_kelly	ePub	2	03-19-2011 10:40 AM
Can you delete div with align=center	mufc	Recipes	4	12-10-2010 06:23 PM
Center a cover image	Crusader	Sigil	2	10-18-2009 08:51 AM

08-29-2019, 12:43 PM	#4
Frenzie Wizard Posts: 1,742 Karma: 730681 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	The problem is indeed the lack of support for inline-block. A regular block + fixed width will just be a restricted width starting at the left unless otherwise specified.

08-29-2019, 02:16 PM	#5
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	There's a thing with tables where you set margin-left and margin-right to auto; would that help here?

08-29-2019, 03:56 PM	#6
Frenzie Wizard Posts: 1,742 Karma: 730681 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	A regular display:block with something like margin:0 auto should also work, yes. Firefox didn't support it until version 4; that was a thorn in my eyes since '03 or so when Opera added support. I'm somewhat double surprised to see it in an EPUB and used for this purpose though.

08-29-2019, 04:06 PM	#7
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	I think I saw it on w3schools.com.

08-29-2019, 05:07 PM	#8
Frenzie Wizard Posts: 1,742 Karma: 730681 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	Pardon, by "it" I meant "inline-block" used this way, not auto margin.