05-27-2011, 10:31 AM | #1 |
Connoisseur
Posts: 96
Karma: 20572
Join Date: Sep 2010
Device: None
|
Override ePub CSS with userStyle.css?
Can I tell the PRS-350 to ignore ePubs' CSS and use the userStyle.css for all ePubs instead? That would make editing individual ePubs' CSS unnecessary.
I installed porkupan/boroda's firmware, and made some changes to userStyle.css. The changes don't seem to affect ePub formatting. Maybe I'm entering bad CSS code, but I think there may be conflicting CSS in the ePub files I'm viewing. Can someone please tell me if the CSS code below has errors in it? (1) eliminate margins: Code:
p { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; } Code:
p { line-height: 1.04em; } Code:
p, div { margin: 0pt; border: 0pt; text-indent: 1.5em; } Last edited by barium; 05-27-2011 at 03:58 PM. |
05-27-2011, 06:13 PM | #2 |
Connoisseur
Posts: 96
Karma: 20572
Join Date: Sep 2010
Device: None
|
For some calibre created epubs, I found the following, idiotic solution. I viewed the stylesheet.css for one, and noticed several .calibre# classes with formatting information.
E.g.: .calibre1 { border: 1px inset; color: black; display: block; height: 2px; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; margin-top: 0.5em } In my userStyle.css, I replaced the formatting in ALL of those classes with my desired formatting for the p {} tag: .calibre1 { line-height: 1.06em !important; margin-top: 0 !important; padding:0; etc. } .calibre2 { line-height: 1.06em !important; margin-top: 0 !important; padding:0; etc. } And that worked. Now news downloads, and other calibre created epubs, look more or less the way I'd like them to. A lot of formatting is ripped out, of course. And there are some gaps, because some calibre epubs use more classes than others, but I think that should be easy to fix by simply adding more .calibre# classes to userStyle.css. ePubs created elsewhere, though, use different classes and tags, but I guess coming up with several commonly used classes and tags and ripping them out using the userStyle.css file in the same way should help. Last edited by barium; 05-27-2011 at 06:16 PM. |
Advert | |
|
05-28-2011, 07:22 PM | #3 | |
Nameless Being
|
Quote:
I think you need a measurement type for margin: Code:
p { margin-left: 0em; margin-right: 0em; margin-top: 0em; margin-bottom: 0em; } I doubt if p { line-height: 1.04em } will display any different than p { line-height: 1.00em } unless em is really big. All the other CSS looks fine, except that I would use em rather than pt for ereaders. I'm not familiar with porkupan/boroda's firmware, so it might just be the default that you are changing. I would not be surprised if the book's CSS overrides the firmware defaults. Also, if you edit your ePubs with Sigil you will get much cleaner CSS and HTML. Calibre adds too much garbage to the file which makes it difficult to read when trying to make modifications. Last edited by jswinden; 05-28-2011 at 07:45 PM. |
|
05-28-2011, 07:29 PM | #4 |
Resident Curmudgeon
Posts: 76,038
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
You do not need em. And you also do not need a ; on the last line before }.
Code:
p { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 } |
05-28-2011, 10:50 PM | #5 | |
Connoisseur
Posts: 96
Karma: 20572
Join Date: Sep 2010
Device: None
|
Thanks for the tips.
Quote:
Some ePubs seem to get formatting information from a .xpgt file. I wonder if it's possible to override those using CSS. The formatting in those files doesn't look like it's in the same language, so I don't even know how to try. |
|
Advert | |
|
05-29-2011, 04:42 PM | #6 |
Resident Curmudgeon
Posts: 76,038
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
I tried PRS+ on the 505 and found that the user style sheet overrode what was in the CSS for the eBook and thus, was not all that useful because I was unable to override the user style sheet in the ePub.
|
06-17-2011, 08:40 PM | #7 | |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Quote:
For instance, I set Minion as my default font with the following: Code:
@font-face { font-family: "Minion"; ... } ... all the necessary directives html { font-family: "Minion"; ... } Since, in the vast majority of cases, I rip off the DRM and wrangle the css garbage inside the ePub into something that's readable, I don't have much need for the !important overrride. But it's useful for those who don't want to do that all the time. [edit: BTW, a line-height of 1.04em is WAY too small unless you're using a font with a ridiculously small x-height and then blowing it up. You really want 1.2em at least to get optimal readability. Cramming all the lines together may sound like a good way to get more text on the screen, but it's not really a good idea.] Last edited by charleski; 06-17-2011 at 08:44 PM. |
|
06-17-2011, 09:24 PM | #8 | |
Resident Curmudgeon
Posts: 76,038
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
But, I use a font-size of 95% and a line-height of 1.03em. That works. But where the font size is larger then the body size like h2, I use 1.1em. |
|
06-17-2011, 11:51 PM | #9 | |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Quote:
As I said, this does depend on the font, and you could get by with less if using a font with a particularly small x-height. But it's no co-incidence that fonts designed for high legibilty at small sizes typically have a large x-height and rely on a reasonable amount of leading to provide the negative space needed for shape-recognition. |
|
06-18-2011, 07:00 PM | #10 |
Resident Curmudgeon
Posts: 76,038
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
I do find that if there is too much space between the lines, that it is distracting. So I prefer a tighter space between the lines. That's why 1.2em is too large for most fonts I've tried.
|
06-27-2011, 03:53 AM | #11 |
PRS+ author
Posts: 1,637
Karma: 2446233
Join Date: Dec 2007
Device: Sony PRS-300, 505, 600, 650, 950
|
The only right way to override fonts in my opinion is:
Code:
@font-face { font-family: sans-serif; src:url(res://....); } @font-face { font-family: serif; src:url(res://...); } @font-face { font-family: monospace; src:url(res://...); } Custom CSS works in all books, but some might have style that overrides yours, which is a generic CSS "issue". Check this: Understanding the selectors priority |
07-16-2011, 03:25 PM | #12 | |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Quote:
But you have a point about redefining the base font classes, that will catch cases where the book (unnecessarily) has something like body { font-family: serif ... }. |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
user accessable userStyle.css please | tselling | PocketBook | 14 | 02-25-2022 05:27 PM |
PRS 650 Firmware and userStyle.css | mboyaci | Sony Reader | 1 | 12-07-2010 03:59 PM |
userstyle.css and epub margins | tselling | Sony Reader Dev Corner | 8 | 10-28-2010 01:51 PM |
ADE mit userstyle css | mtravellerh | PocketBook | 0 | 05-21-2010 03:40 PM |
ePub conversion: override existing css with a custom one | sbin | Calibre | 1 | 01-09-2010 04:03 AM |