Loading a custom CSS on kepub opening - Page 4

Anak · 08-05-2013, 05:25 AM

Quote:

Originally Posted by DNSB

Using the 150% font-size declaration makes the kepub font size match the epub font size. That way, I don't have to muck with the font size slider when I change renderers.

Regards,
David

If you want the default font size to match accurately on both renderers you should replace the % value with a pt value in de body tag. The font remains perfectly scalable.
Adobes default font size (1em) is 12pt. Kobos Access default font size is/was 14pt. That is why the text on my Touch is always bigger when using the Access renderer. But can be different now. Or different on a Aura HD.

Code:

body {
font-size:12pt;
/* default font size 12pt = 100% = 1em */
}

IMO it is very unlikely that a rounded % value will match perfectly. Under the assumption that 12pt and 14pt is still accurate, you'll get:
Adobe
12 pt (default). 14pt (116.667%)
Access
14 pt (default). 12pt (85.714%)

Try this css. It should give the same results but the redundancies are removed. Only the different settings from the body defaults are specified.

Code:

@page {
  margin: 5pt !important;
}

body {
/* default settings */
   margin: 0 !important;
   padding: 0 !important;
   padding-bottom: 0.2em !important;
   font-size: 150% !important;
   text-indent: 0 !important;
   text-align: left !important;
   line-height: 1.0 !important;
   widows:  0 !important;
   orphans:  0 !important;
   -webkit-hyphens: auto !important;
   }
div {
   text-indent: 4% !important;
   }
p {
   text-indent: 4% !important;
   margin:0;
   padding:0;
   }

May need a little tweaking to get it right.

A brief example when the output will be different:

Code:

p {
margin: 0 !important;
}

compared to

Code:

p {
margin: 0 0 0 0 !important;
}

The latter overrules all margin settings.

If a class is defined as

Code:

.example {
margin-top: 5em;
}

It work as aspected with a 5em top margin in situation 1. In the second situation the 5em top margin will be ignored and set to 0.

When defining default values it is best to define as margin:0 !important instead of margin: 0 0 0 0 !important or margin-left, -right, -top, -bottom. The same applies for other selectors.

DNSB · 08-05-2013, 12:35 PM

Quote:

Originally Posted by Anak

If you want the default font size to match accurately on both renderers you should replace the % value with a pt value in de body tag. The font remains perfectly scalable.
Adobes default font size (1em) is 12pt. Kobos Access default font size is/was 14pt. That is why the text on my Touch is always bigger when using the Access renderer. But can be different now. Or different on a Aura HD.

What I see on the Aura is that text in a .kepub is close to 8pt when using the same font slider setting as I normally use for .epubs.

Quote:

Originally Posted by Anak

A brief example when the output will be different:

Code:

p {
margin: 0 !important;
}

compared to

Code:

p {
margin: 0 0 0 0 !important;
}

The latter overrules all margin settings.

If a class is defined as

Code:

.example {
margin-top: 5em;
}

It work as aspected with a 5em top margin in situation 1. In the second situation the 5em top margin will be ignored and set to 0.

When defining default values it is best to define as margin:0 !important instead of margin: 0 0 0 0 !important or margin-left, -right, -top, -bottom. The same applies for other selectors.

I've always had the impression that margin: 0; is simply a shorthand equivalent to margin: 0 0 0 0; so there should be no difference between using either form.

So now, I will have to fiddle with the css file to see if I can see any differences. Who needs to read ebooks when you can have more fun playing with the ereader?

Regards,
David

Anak · 08-05-2013, 01:57 PM

Quote:

Originally Posted by DNSB

I've always had the impression that margin: 0; is simply a shorthand equivalent to margin: 0 0 0 0; so there should be no difference between using either form.

So now, I will have to fiddle with the css file to see if I can see any differences. Who needs to read ebooks when you can have more fun playing with the ereader?

That's what I thought too, but I've learned it by doing it. Or it is the !important rule that only works on that specific piece of code. A !important shorthand rule overrules other shorthand rules but does not influence non shorthand code. Trial-and-error.

Reading? Can't even remember the last time.

Did some further testing and !important rules only work on that specific code.

margin:0 !important; sets al margins to 0 (obvious)
but does not affect, more precise settings of the same selector:

margin:2em 1em 2em 1em;
margin:2em 1em;
margin-top: 5%;
margin-bottom: 2em;
margin-left: 1em;
margin-right: 24px;

but does overrule
margin:2em; (margins are set to 0)

Which is good as you probably don't want to change the original layout completely.

Mrs_Often · 09-12-2013, 07:53 AM

Quote:

Originally Posted by met67

Hi,

I've spent some (interesting...) time strace-ing nickel and found that, on every kepub opening, it searches for this file:

Code:

/mnt/onboard/.kobo/kepub/kepub-book.css

So I tried to create such a file with a single line like this:

Code:

* { -webkit-hyphens: auto; }

and voilà, every book I open gets hyphenated!

This could also used to force other properties like widows/orphans, margin, ecc. ecc.

Quote:

Originally Posted by Anak

kepub-book.css seems to be epub3 complient. It accepts many css3 properties (if implemented). Including @rules like

Code:

@-epubx-viewport {width:610px !important;height:810px !important;}

Kepubs with an empty line after each paragraph can be fixed by adding this to the stylesheet.

Code:

p {padding-bottom:0 !important;}

Made me soooo happy!!

sekhemty · 02-09-2017, 06:05 PM

Hello, I have a Kobo Glo (first generation, not Kobo Glo HD), running the 3.19.5761 firmware version.

I've tried to create the kepub-book.css file in the correct directory, and added some custom rules to it, but apparently it doesn't work, my ebooks don't display these customization.

Is this still feature still supported?

jackie_w · 02-09-2017, 07:58 PM

Quote:

Originally Posted by sekhemty

Is this still feature still supported?

No not in the same way it used to be. It's now part of the internal libnickel.so.1.0.0 file rather than being stored in the user-accessible area.

However, depending on what you want to do to it you may find some of the Kobo patches helpful because some of them do make changes to this file.

Katja_hbg · 02-11-2017, 02:13 AM

does this help you https://www.mobileread.com/forums/sho...&postcount=158
I use it on my HD to switch to horizontal

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PRS-950 A little web too to generate custom CSS	gsgleason	Sony Reader	0	12-18-2011 06:51 PM
Custom CSS	Japes	Conversion	5	07-09-2011 08:15 PM
PRS-300 Stuck in Opening Book, Loading, restart cycle	tiggertiffin87	Sony Reader	0	10-18-2010 08:33 PM
Custom CSS for output	deckoff	Calibre	1	08-28-2010 11:55 PM
Custom covers for Kobo's book loading screen?	Gianorama	Kobo Reader	7	07-28-2010 11:44 AM

02-09-2017, 06:05 PM	#50
sekhemty Member Posts: 16 Karma: 10 Join Date: Feb 2017 Device: Kobo Glo	Hello, I have a Kobo Glo (first generation, not Kobo Glo HD), running the 3.19.5761 firmware version. I've tried to create the kepub-book.css file in the correct directory, and added some custom rules to it, but apparently it doesn't work, my ebooks don't display these customization. Is this still feature still supported?

02-11-2017, 02:13 AM	#52
Katja_hbg Groupie Posts: 183 Karma: 158116 Join Date: Oct 2015 Device: Kobo Glo HD (landscape), Kobo Aura One	does this help you https://www.mobileread.com/forums/sho...&postcount=158 I use it on my HD to switch to horizontal

Advert

Advert