Recenter images in kobo-justified mode

[Simboubou]

Hello,

I have the habit to convert all my epubs to kepubs, with a unified format.
One thing I noticed (and found mentioned elsewhere on the forum), it that when using the "justified" mode on the kobo, Centering information (mostly on images) are messed up.

I know that one solution is to enforce justified text when converting books in calibre then turn justify Off on the kobo. But for some reasons I'd like to find a way not to have to do that on some books. I'm ok with editing books and using a regex-find-and-replace, but I'm not very good at css. Is there some property that I could inject that would center images even in kobo-justifed mode ?

[jackie_w]

Originally Posted by Simboubou

Hello,

I have the habit to convert all my epubs to kepubs, with a unified format.
One thing I noticed (and found mentioned elsewhere on the forum), it that when using the "justified" mode on the kobo, Centering information (mostly on images) are messed up.

I know that one solution is to enforce justified text when converting books in calibre then turn justify Off on the kobo. But for some reasons I'd like to find a way not to have to do that on some books. I'm ok with editing books and using a regex-find-and-replace, but I'm not very good at css. Is there some property that I could inject that would center images even in kobo-justifed mode ?

First let me say that if you want to understand and control styling in your Kobo epubs/kepubs you really need to understand how HTML and CSS works. You don't need to be an expert but a basic understanding (and a willingness to learn more) is essential.

The problem you're running up against is the Kobo firmware's built-in CSS overrides used when you use the sliders and buttons in the [Aa] menu. Override CSS for kepub is more aggressive than the override CSS used for standard epub.

In the scenario you've raised the default override CSS for kepub text alignment is

div, p { text-align: %1 !important; }

so if you're wrapping your book's HTML <img> tags in a <div> or a <p> tag, then any text-align:center CSS styling is going to get overridden by whatever alignment button (left/justify) you've selected in the [Aa] menu.

You can combat this in one of 2 ways:

1. If you're a user of the kobopatch system you can make the override CSS above less aggressive with a patch to the firmware. See patch Un-Force user text-align in div,p tags in KePubs
2. If patching is not an acceptable option then you could try wrapping your book HTML <img> tags in any block HTML tag which is neither <div> nor <p>.

Personally I choose option 1. I have not tried option 2 (and it will probably make standards purists shudder ) but see no reason why it wouldn't work. Obviously you'd need to do it for every book.

[Simboubou]

Thanks !

I do understand some basic html/css, but since I never write any, I have no idea which flags I could use for centering anything.

My firmware is patched, so solution 1 is possible. Wouldn't that also wreck text align tho ? I'll give it a try.

[jackie_w]

Originally Posted by Simboubou

Wouldn't that also wreck text align tho ? I'll give it a try.

Well, that depends on whatever other CSS text-align styles exist in your books.

The problem with override CSS and the !important property is ... it does exactly that. There's no "override CSS except when I don't want it to" crystal ball button

The problem with asking for CSS advice in these forums is that if 10 people reply you'll get 10 different answers. Impassioned arguments/ranting may ensue and at the end of it none of the 10 have changed their original opinion. In this respect it's much like forum discussions about copyright or piracy or the best way to create page numbers in ebooks.

[JSWolf]

It's a bug in KePub. You cannot use either justification setting without screwing with centered text. The best thing is to put your preferred justification in the body class. It's what I do and I remove all left and full justification. That way, I can leave justification set to off.

[Simboubou]

Originally Posted by JSWolf

It's a bug in KePub. You cannot use either justification setting without screwing with centered text. The best thing is to put your preferred justification in the body class. It's what I do and I remove all left and full justification. That way, I can leave justification set to off.

I know, but then I lose the ability to turn hyphenation on or off on the kobo. I need to force-enable it when converting.

When I bought my first kobo, I struggled with hyphenations dictionaries, and ended up disabling it altogether.
But now, I've grown more aware of the weird spacing induced by the absence of hyphenation. So I wanted to try hyphenation again, with the ability to turn it off and on.

I re-tried the hyphen dicts you posted a while ago, and it works quite well for english, with hyphens being quite rare. I'm not sure french will work as well. We'll see.

[JSWolf]

Originally Posted by Simboubou

I know, but then I lose the ability to turn hyphenation on or off on the kobo. I need to force-enable it when converting.

When I bought my first kobo, I struggled with hyphenations dictionaries, and ended up disabling it altogether.
But now, I've grown more aware of the weird spacing induced by the absence of hyphenation. So I wanted to try hyphenation again, with the ability to turn it off and on.

I re-tried the hyphen dicts you posted a while ago, and it works quite well for english, with hyphens being quite rare. I'm not sure french will work as well. We'll see.

Others have said that the French hyphenation dictionary I posted works well.

Set hyphenation on and edit the CSS for full justification. If you don't like it, you can go left justification by editing the CSS. and replacing the KePub in full with the KePub in left.

[Simboubou]

Originally Posted by JSWolf

Others have said that the French hyphenation dictionary I posted works well.

Set hyphenation on and edit the CSS for full justification. If you don't like it, you can go left justification by editing the CSS. and replacing the KePub in full with the KePub in left.

I remember using a dict I found online (probably here?) for french Hyphens, but maybe it wasn't yours. It was long time ago. Anyway, I've read a few chapters with English hyphenation and it was good enough, so I guess I'll just convert setup my kepubs to force-hyphens for now on.

[JSWolf]

Originally Posted by Simboubou

I remember using a dict I found online (probably here?) for french Hyphens, but maybe it wasn't yours. It was long time ago. Anyway, I've read a few chapters with English hyphenation and it was good enough, so I guess I'll just convert setup my kepubs to force-hyphens for now on.

You could try the French hyphenation dictionary that I posted in the same thread as the English one.

[Simboubou]

Originally Posted by JSWolf

You could try the French hyphenation dictionary that I posted in the same thread as the English one.

I installed new dicts, I do have poor hyphens with two letters on after the -.
I noticed that hyphenations was better on longer words, so I try to change the left and right hyphens length in the dic file. It does not seem to change kobo behaviour, unfortunately.

[JSWolf]

Originally Posted by Simboubou

I installed new dicts, I do have poor hyphens with two letters on after the -.
I noticed that hyphenations was better on longer words, so I try to change the left and right hyphens length in the dic file. It does not seem to change kobo behaviour, unfortunately.

I suggest you read in ePub if the eBook does not have images (other then the cover and title page) and footnotes. Then you'll get better hyphenation.

[Simboubou]

I can try that, but epub reader is usually quite bad at filling pages (sometimes leaving the equivalent of 2 lines of blank space at the, while still having a 2-widow on the next page.

I guess I could try to mess around with orphans and widow settings as well. The thing is, the more I learn about typography, the more I see issues in the books I read

Well, I guess to reader is perfect, you have to accept whatever small issues you with the one you're using.

Still, I'll try to mess around with epubs settings and conversion for my next books. Thanks for your help !

[jackie_w]

Originally Posted by Simboubou

I installed new dicts, I do have poor hyphens with two letters on after the -.
I noticed that hyphenations was better on longer words, so I try to change the left and right hyphens length in the dic file. It does not seem to change kobo behaviour, unfortunately.

If you're talking about hyphenation in kepubs you can affect the right/left chars for hyphenation with CSS.

-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-before: 3;

Adjust the values as required.

How to apply it easily to all your kepubs will depend on how you're creating those kepubs.

[Simboubou]

Originally Posted by jackie_w

If you're talking about hyphenation in kepubs you can affect the right/left chars for hyphenation with CSS.

-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-before: 3;

Adjust the values as required.

How to apply it easily to all your kepubs will depend on how you're creating those kepubs.

I use calibre to create convert epubs to kepubs. I checked : the books do contain the above lines. So I don't know.

[jackie_w]

Originally Posted by Simboubou

I use calibre to create convert epubs to kepubs. I checked : the books do contain the above lines. So I don't know.

If you're using the KoboTouchExtended plugin to create your kepubs look closely at the contents of the css/hyphenation.css file. You may need to manually correct it. See my latest post in the plugin thread.