Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style tweaks: use css snippets to tweak book style #3944

Merged
merged 6 commits into from May 12, 2018

Conversation

Projects
None yet
8 participants
@poire-z
Copy link
Contributor

poire-z commented May 12, 2018

Adds a new menu "Style tweaks", with a few CSS snippets that can make some things better with some books, the most useful allowing to unlock unchangeable page margins and line heights with some books.
As disccused in (and with contributions from) #3923.

Some screenshots (changes are applied in real-time and menu is not closed when tap/hold - I kept the menus small so there's room below to see the effect on the page):

image

image

image

image

image

image

image

image

image

.

I would also try to keep MuPDF in mind while writing the feature if reasonably possible. Most of the code, except applying it to the engine should be engine agnostic.

Done as you wished :) This new module menu just signals ReaderTypeset on change, and ReaderTypeset requests the additional css_text from ReaderStyleTweak, and applies it itself.

Also, the Page icon menu is a bit messy I think, with related stuff not together.
I tried changing it to something more coherent (but I couldn't get used to it :|):

image

image

with:

    typeset = {
        "change_font",
        "set_render_style",
        "style_tweaks",
        "hyphenation",
        "floating_punctuation",
        "----------------------------",
        "page_overlap",
        "switch_zoom_mode",
        "speed_reading_module_perception_expander",
        "----------------------------",
        "highlight_options",
    },

poire-z added some commits May 12, 2018

Style tweaks: use css snippets to tweak book style
Adds a new menu "Style tweaks", with a few CSS snippets
that can make some things better with some books.
@Eduardomb22

This comment has been minimized.

Copy link

Eduardomb22 commented May 12, 2018

Thanks a lot for this update!

@@ -54,8 +54,8 @@ local function initDataDir()
local sub_data_dirs = {
"cache", "clipboard",
"data", "data/dict", "data/tessdata",
"history",
"ota", "screenshots", "settings",
"history", "ota",

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

These are only here to create them if they don't exist. That makes sense for styletweaks, but not so much for ota or screenshots I think?

This comment has been minimized.

@poire-z

poire-z May 12, 2018

Author Contributor

Dunno, I guess that by creating them here, the person who implemented their usage may have avoided checking if the directory exists/create it if not. Haven't looked at each of them.

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

Oh, that was just reordering? All of it?

This comment has been minimized.

@poire-z

poire-z May 12, 2018

Author Contributor

Yes, while adding styletweaks (just to not have that standalone "history" and the lines kinda the same length)


local content = VerticalGroup:new{
TextBoxWidget:new{
text = self.tweak.title,

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

Since you're referencing self.tweak a lot it's probably better to store a local tweak = self.tweak reference to it instead of doing a repeated table lookup?

})
table.insert(content,
TextBoxWidget:new{
text = _("You have set this tweak to be used on all books."),

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

Maybe This tweak will be applied to all books.?

This comment has been minimized.

@poire-z

poire-z May 12, 2018

Author Contributor

As it's a message to let the user know it has previously set it as Default, the futur tense is a bit strange. This tweak is currently applied to all books ?
But I like the "You have set...", it states that "You decided that", not just a simple fact like "This tweak is applied to all books" (uh, why?)

This comment has been minimized.

@poire-z

poire-z May 12, 2018

Author Contributor

Changed to This tweak is applied on all books., which make it smaller and fit on a single line.


function TweakInfoWidget:onShow()
UIManager:setDirty(self, function()
return "ui", self[1][1].dimen

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

Might be more legible to store a reference named something like self.movable_container and use that.

hold_callback = function()
UIManager:show(InfoMessage:new{
text = _([[
Style tweaks allow changing small parts of a book styles (including the publisher/embedded styles) to make visual adjustments or disable unwanted publisher layout choices.

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

small parts of book styles ← preferable
small parts of a book's styles ← correct version of what's written

{
id = "sub_sup_smaller";
title = _("Smaller sub- and superscript"),
description = _("Prevent sub- and superscript from affecting line-height"),

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

Period.

},
},
{
title = _("Misc"),

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

There's no reason not to use the full form of the word, I think?

{
id = "list_items_fix";
title = _("Fix some list items issues"),
description = _("Work around some crengine list items rendering issues "),

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

stray space and no period

{
id = "border_all_none";
title = _("Remove all borders"),
description = _("Work around a crengine bug that makes a border drawn when {border: black solid 0px}"),

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

Period?

title = _("Work around all bugs"),
description = _("Seriously ? :-)"),
css = [[
body { display: none !important; }

This comment has been minimized.

@Frenzie

Frenzie May 12, 2018

Member

lol what :-P

This comment has been minimized.

@poire-z

poire-z May 12, 2018

Author Contributor

Yes, and even this workaround is buggy (it makes a 0 page book, and you reload the book with this tweak applied, you get a black page. So it's dangerous.
I'll remove it, unless we find some other funny and gentle style tweak.

poire-z added some commits May 12, 2018

@poire-z poire-z merged commit 5b7664b into koreader:master May 12, 2018

1 check passed

ci/circleci Your tests passed on CircleCI!
Details

@poire-z poire-z deleted the poire-z:style_tweaks branch May 12, 2018

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented May 12, 2018

No particular comment/opinion about the Page icon menu (bottom of first post)?

@Frenzie

This comment has been minimized.

Copy link
Member

Frenzie commented May 13, 2018

I wonder if it shouldn't have two more dividers? No objections really. :P

@cramoisi

This comment has been minimized.

Copy link
Contributor

cramoisi commented May 15, 2018

@poire-z (late on enjoying but I want to be sure I understood correctly ) :

the user's tweaks has to be set in a directory /.adds/koreader/styletweaks
there, how do I have to write them ? Lua style like in frontend/ui/data/css_tweaks.lua or css style ? and how do I have to name the file ?

It would be cool to have an example file in the directory

@cramoisi

This comment has been minimized.

Copy link
Contributor

cramoisi commented May 15, 2018

Also I saw that the papercut issue is a real problem here has the checkbox are slow to update and the cut kills the menu

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented May 15, 2018

Name a file This_is_a_test.css, put in it pure CSS, and it will appear in the menu as This is a test.
As on this screenshot:
image

@cramoisi

This comment has been minimized.

Copy link
Contributor

cramoisi commented May 15, 2018

dumb me ! thanks !

@didierm

This comment has been minimized.

Copy link

didierm commented May 19, 2018

This is such a great feature !
After all these years, I can now finally enforce full text-justify while keeping all other vendor styles (FBReader allowed to force justify, but lost the vendor styles) by dropping a simple file Force_full_justify.css in ./koreader/styletweaks/ :

p {
  text-align: justify !important;
} 

Thanks again ; KOReader rocks.

Why isn't there a KOReader donation page ?

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented May 19, 2018

Glad people enjoy and play with this, thanks :)
Shouldn't this be added to div and li too, not only p ?
Feel free to contribute a patch to css_tweaks.lua, or tell me if you want me to add it (I think I never met a book where things were not justified, but in case some publishers force an other test-align, it would be nice to have).

@Frenzie

This comment has been minimized.

Copy link
Member

Frenzie commented May 19, 2018

@didierm Suggestions welcome. :-) Also see #3820 (comment)

@didierm

This comment has been minimized.

Copy link

didierm commented May 21, 2018

@poire-z It would be nice if you could add it ; as a rule of thumb, about 30-40% (gut feeling) of the books I read are not justified.

@Frenzie CoolReader has/had an empty donation package (which I now remember contributing to ;) : https://play.google.com/store/apps/details?id=org.coolreader.donation.gold&hl=en_US).
I consider this an elegant solution, but taking into account this requires a Google account (which, in this day and age, may be a privacy invasion in itself) and Google/Alphabet probably taking a fair share for themelves, I am perfectly OK with donating directly to e.g. a PayPal account.
Note : not paying for any favours/bounties (which is a nice idea in itself), but just wanting to say thank you to the contributors for such a nice piece of work/love.

@Frenzie

This comment has been minimized.

Copy link
Member

Frenzie commented May 22, 2018

An empty Google Play package is a very interesting idea, although the practical problems the way I see it are more about fairness and also how to do it all properly within the law.

Liberapay looks like an interesting concept.

@didierm

This comment has been minimized.

Copy link

didierm commented May 22, 2018

For the moment being, I'm personally thinking about a one-time donation (€ 20).
Liberapay looks fine and in true OSS spirit ; please notify me if and when you have made something available to donate to.

@cramoisi

This comment has been minimized.

Copy link
Contributor

cramoisi commented May 22, 2018

To deal with french books 'epub-ized' by nord compo (I got a lot of them when I borrowed at the library) :

.apnb, .apnb2 { font-size: 50% !important; vertical-align: super !important; line-height:100%;}

@sanksara

This comment has been minimized.

Copy link

sanksara commented Sep 11, 2018

How do we create a drop case character (First character of a paragraph is bigger and in different font style ) using the custom style tweak. I tried all methods of CSS but no success..

Thanks

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented Sep 11, 2018

If it's not there in the original book (and then, only supported (*) if done with classic <font> or <span style= or class=> surrounding the first character), you can't.

crengine does not support any pseudo-elements like ::first-letter.
(It only supports a very limited set of pseudo-classes (see koreader/crengine#180), but these won't help you)

(*: and even then, crengine does not really render them nicely, the bigger char would take space above, or below if there is some vertical-align, but it would push the next line lower - it is not able to "indent" the next line(s) to make room for a bigger char taking space below - you won't be able to get the nice calibre rendering shown in #2844 - only the other koreader ones shown)

@sanksara

This comment has been minimized.

Copy link

sanksara commented Sep 12, 2018

If it's not there in the original book (and then, only supported (*) if done with classic <font> or <span style= or class=> surrounding the first character), you can't.

crengine does not support any pseudo-elements like ::first-letter.
(It only supports a very limited set of pseudo-classes (see koreader/crengine#180), but these won't help you)

(*: and even then, crengine does not really render them nicely, the bigger char would take space above, or below if there is some vertical-align, but it would push the next line lower - it is not able to "indent" the next line(s) to make room for a bigger char taking space below - you won't be able to get the nice calibre rendering shown in #2844 - only the other koreader ones shown)

Thanks for the reply.
AIreader in android has a good first character formatting via options. but unfortunately most vendor formatting is lost
It would be good to have nice formatting options like changing font, color etc..for header( h1, h2, h3), title, body etc..like in FB reader but still retain other publisher properties.

Thanks very much

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented Sep 12, 2018

It would be good to have nice formatting options like changing font, color etc..for header( h1, h2, h3), title, body.

That, you can do with Style tweaks. Create a bunch of user style tweaks with the formatting you like, and apply them when needed).
(CoolReader too has a UI and many menu items to change many styles for body, headers, ... but I never felt the need to change what they provide - Style tweaks, although needing the user to know a bit about CSS, gives more flexibility, and allow fixing other -more bothering- things)

@KenMaltby

This comment has been minimized.

Copy link

KenMaltby commented Sep 12, 2018

Really well done, I think that this well be useful for both the average slightly adventurous user and for those who are already comfortable with the CSS world. Just being able to add a tweak, instead of building a whole new CSS, is a great convenience. With the explanation and hints provided, the user can become confident enough to dip his toe into CSS Tweaking process. Bravo!

@NiLuJe

This comment has been minimized.

Copy link
Member

NiLuJe commented Sep 12, 2018

Yep, I vastly prefer that approach vs. the bloated menus approach ;).

@sanksara

This comment has been minimized.

Copy link

sanksara commented Sep 15, 2018

It would be good to have nice formatting options like changing font, color etc..for header( h1, h2, h3), title, body.

That, you can do with Style tweaks. Create a bunch of user style tweaks with the formatting you like, and apply them when needed).
(CoolReader too has a UI and many menu items to change many styles for body, headers, ... but I never felt the need to change what they provide - Style tweaks, although needing the user to know a bit about CSS, gives more flexibility, and allow fixing other -more bothering- things)

I really like this feature of style tweaks.. and Very many thanks for the hard work of this team.
I enjoy changing color, borders..etc and is very refreshing to read the epub in multi colors and fonts but still maintain most publisher styles.. Best Effort
This is much versatile than AIreader, cool reader etc..

Some suggestions request to add in the next version

  • To have some basic "code inspection" for the page that is displayed (so that i can use the class reference to change style for a particular class. Now i use AIreader to see the code of the page and use an external editor to tweak... bit very tedious.

  • please include a small code editor for the tweaks..

  • also please let me know a way to replace code in CSS using regex.. E.g i want to format a text between quotes character..

  • Also i am unable to change the background using an external image (jpg). it is not recognised

Thanks very much..
KOREADER is the best that can happen for epub !!!

@Frenzie

This comment has been minimized.

Copy link
Member

Frenzie commented Sep 15, 2018

also please let me know a way to replace code in CSS using regex.. E.g i want to format a text between quotes character..

That would be scripting, not CSS, sorry.

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented Sep 15, 2018

please include a small code editor for the tweaks..

You already have that :) #4135

Also i am unable to change the background using an external image (jpg). it is not recognised

The background image support in crengine is a bit broken I think, and it may not go look for the image file outside of the EPUB container.

a way to replace code in CSS using regex.. E.g i want to format a text between quotes character..

I'm not sure I understand.
Koreader can't modify stuff inside an EPUB (that would be quite some work, and may allow corrupting the file, and there's no going back then :). You can only override stuff from outside with Style twreaks.
And if you're talking about text between quotes inside the HTML, you could change that with tweaks, but only if that text between quotes is iself in some HTML node and you can guess the tags and classnames...

@Frenzie

This comment has been minimized.

Copy link
Member

Frenzie commented Sep 15, 2018

@poire-z Sometimes quotes aren't in the HTML and are just generated content. That's with the <q> element.

@sanksara

This comment has been minimized.

Copy link

sanksara commented Sep 15, 2018

please include a small code editor for the tweaks..

You already have that :) #4135

I am not able to see that in my menu.. :-( .. Also i mean that by "code inspector", i meant to view the html codes (not CSS) of the page being displayed to find out the "tag" format . In epub many times the publishers use custom names for their paragraphs (it is not always

but <p.class1, p.class2.. etc). It would be good to know the class name so that the style can tweaked for that in css. (View code is in AIreader -> book options -> view source)

Also i am unable to change the background using an external image (jpg). it is not recognised

The background image support in crengine is a bit broken I think, and it may not go look for the image file outside of the EPUB container.

a way to replace code in CSS using regex.. E.g i want to format a text between quotes character..

I'm not sure I understand.
Koreader can't modify stuff inside an EPUB (that would be quite some work, and may allow corrupting the file, and there's no going back then :). You can only override stuff from outside with Style tweaks.
And if you're talking about text between quotes inside the HTML, you could change that with tweaks, but only if that text between quotes is iself in some HTML node and you can guess the tags and classnames...

@poire-z

This comment has been minimized.

Copy link
Contributor Author

poire-z commented Oct 8, 2018

I am not able to see that in my menu.. :-( ..

Might be you are not using nightly builds. But that text editor is now in the beta released yesterday. https://github.com/koreader/koreader/releases

Also i mean that by "code inspector", i meant to view the html codes (not CSS) of the page being displayed to find out the "tag" format

That will be in tomorrow's nightly (on in next beta, by christmas :). Screenshots in koreader/crengine#236

@sanksara

This comment has been minimized.

Copy link

sanksara commented Oct 9, 2018

Thanks a lot poire-z..for taking time to and features .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.