Loading a custom CSS on kepub opening - Page 3

jgoguen · 08-02-2013, 01:35 PM

What's the language identifier set to in the OPF file and each content file?

Anak · 08-02-2013, 02:16 PM

Quote:

Originally Posted by jgoguen

What's the language identifier set to in the OPF file and each content file?

xml:lang="nl" and <dc:language>nl</dc:language>

jgoguen · 08-02-2013, 02:57 PM

In addition to xml:lang, can you set lang="nl" on each <html> element?

Anak · 08-02-2013, 03:19 PM

Quote:

Originally Posted by jgoguen

In addition to xml:lang, can you set lang="nl" on each <html> element?

<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">

Doesn't work.

jgoguen · 08-02-2013, 03:30 PM

That's unfortunate. I'm out of ideas.

tartanpion · 08-03-2013, 11:02 AM

is there a way to overcome the line-height fixed to 1.3 in a paragraph with this custom css ?

DNSB · 08-03-2013, 01:37 PM

Quote:

Originally Posted by tartanpion

is there a way to overcome the line-height fixed to 1.3 in a paragraph with this custom css ?

Have you tried adding a line such as the one below?

Code:

body {line-height: 1.1 !important;}

You can also try using the universal selector by adding:

Code:

* {line height: 1.1 !important;}

though I am not fond of using that selector.

Regards,
David

tartanpion · 08-03-2013, 05:58 PM

It does not work. Or i make a mistake somewhere...

tshering · 08-03-2013, 06:26 PM

Only an idea. Let us presume the renderer merges the user stylesheet with its own internal stylesheet in a way that the internal style blocks follow the style blocks of the user style sheet (and thereby overwrite them if there is an overlap and if it is possible). If this is true, one could search libnickel (in FW 2.8.1 maybe nickel) for "body, p { line-height: %1em !important; }" and remove !important.
Note: I haven't do this myself and therefore don't know whether it works.

DNSB · 08-03-2013, 08:07 PM

Quote:

Originally Posted by tartanpion

It does not work. Or i make a mistake somewhere...

Here's what I've tried as a kepub-book.css. My main wants were to have the font size when I open a .kepub to be closer to the font size when I open a .epub and to reduce the left/right margins. From the Kobo GUI, the line height and margin sliders are fully to the left, the font size slider is in the middle.

Code:

body {
   -webkit-hyphens: auto !important;
   font-size: 150%!important;
   line-height: 1.0 !important;
   widows:  0 !important;
   orphans:  0 !important;
   margins: 5pt !important;
   padding-bottom: 0 !important;
   }
div {
   font-size: 1em !important;
   line-height: 1.0; !important;
   margin-bottom: 0.2em !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
   margin-top: 0 !important;
   text-align: left !important;
   text-indent: 4% !important;
   widows:  0 !important;
   orphans:  0 !important;
   padding-bottom: 0 !important;
   }
p {
   font-size: 1em !important;
   line-height: 1.0; !important;
   margin-bottom: 0.2em !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
   margin-top: 0 !important;
   text-align: left !important;
   text-indent: 4% !important;
   widows:  0 !important;
   orphans:  0 !important;
   padding-bottom: 0 !important;
   }

I've attached screenshots of what the ebook looks like with and without the custom css. Items such as the chapter headers moving to the left as the text-align left directive is applied to them. It appears this ebooks uses a lot of <div> tags instead of <p> tags.

Regards,
David

Ken Maltby · 08-04-2013, 08:49 AM

Quote:

Originally Posted by DNSB

Here's what I've tried as a kepub-book.css. My main wants were to have the font size when I open a .kepub to be closer to the font size when I open a .epub and to reduce the left/right margins. From the Kobo GUI, the line height and margin sliders are fully to the left, the font size slider is in the middle.

Code:

body {
   -webkit-hyphens: auto !important;
   font-size: 150%!important;
   line-height: 1.0 !important;
   widows:  0 !important;
   orphans:  0 !important;
   margins: 5pt !important;
   padding-bottom: 0 !important;
   }
div {
   font-size: 1em !important;
   line-height: 1.0; !important;
   margin-bottom: 0.2em !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
   margin-top: 0 !important;
   text-align: left !important;
   text-indent: 4% !important;
   widows:  0 !important;
   orphans:  0 !important;
   padding-bottom: 0 !important;
   }
p {
   font-size: 1em !important;
   line-height: 1.0; !important;
   margin-bottom: 0.2em !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
   margin-top: 0 !important;
   text-align: left !important;
   text-indent: 4% !important;
   widows:  0 !important;
   orphans:  0 !important;
   padding-bottom: 0 !important;
   }

I've attached screenshots of what the ebook looks like with and without the custom css. Items such as the chapter headers moving to the left as the text-align left directive is applied to them. It appears this ebooks uses a lot of <div> tags instead of <p> tags.

Regards,
David

I can understand that you might want the 150% font size, but it might make for a better comparison if you had left that out, it kinda overwhelms the comparing of the rest of the alterations.

Luck;
Ken

DNSB · 08-04-2013, 12:16 PM

Quote:

Originally Posted by Ken Maltby

I can understand that you might want the 150% font size, but it might make for a better comparison if you had left that out, it kinda overwhelms the comparing of the rest of the alterations.

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

Ken Maltby · 08-04-2013, 03:20 PM

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

But the pictures you provided do not match in file size, which makes it hard to notice any other effects you may be trying to demonstrate.

Luck;
Ken

DNSB · 08-04-2013, 10:26 PM

Quote:

Originally Posted by Ken Maltby

But the pictures you provided do not match in file size, which makes it hard to notice any other effects you may be trying to demonstrate.

Effects to notice:

1. All text including the chapter header is left aligned
2. Paragraphs are now ragged right rather than justified
3. Gap between paragraphs have not increased despite the larger font size
4. Paragraphs start with an indented line

And please note the increase in font size is one of the most important items to me. I find it very annoying that the font size using the ACCESS renderer was about 60% of the size of text when the same file with the same css was rendered by Adobe RM requiring me to adjust the font size when switching books.

Regards,
David

DNSB · 08-04-2013, 10:44 PM

Quote:

Originally Posted by Ken Maltby

I can understand that you might want the 150% font size, but it might make for a better comparison if you had left that out, it kinda overwhelms the comparing of the rest of the alterations.

Just to make it easier to compare, here's two screen shots, one without the custom css, the other with my custom css with the font-size: 150% line removed. This should allow you to see the extra lines per page due to the reduction in spacing between lines and paragraphs.

Regards,
David

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

08-02-2013, 01:35 PM	#31
jgoguen Generally Awesome Person Posts: 1,100 Karma: 2191133 Join Date: Jan 2013 Location: /dev/kmem Device: Kobo Clara HD, Kindle Oasis	What's the language identifier set to in the OPF file and each content file?

08-02-2013, 02:57 PM	#33
jgoguen Generally Awesome Person Posts: 1,100 Karma: 2191133 Join Date: Jan 2013 Location: /dev/kmem Device: Kobo Clara HD, Kindle Oasis	In addition to xml:lang, can you set lang="nl" on each <html> element?

08-02-2013, 03:30 PM	#35
jgoguen Generally Awesome Person Posts: 1,100 Karma: 2191133 Join Date: Jan 2013 Location: /dev/kmem Device: Kobo Clara HD, Kindle Oasis	That's unfortunate. I'm out of ideas.

08-03-2013, 11:02 AM	#36
tartanpion Enthusiast Posts: 30 Karma: 10 Join Date: Nov 2011 Location: france Device: kobo libra 2	is there a way to overcome the line-height fixed to 1.3 in a paragraph with this custom css ?

08-03-2013, 05:58 PM	#38
tartanpion Enthusiast Posts: 30 Karma: 10 Join Date: Nov 2011 Location: france Device: kobo libra 2	It does not work. Or i make a mistake somewhere...

08-03-2013, 06:26 PM	#39
tshering Wizard Posts: 3,489 Karma: 2914715 Join Date: Jun 2012 Device: kobo touch	Only an idea. Let us presume the renderer merges the user stylesheet with its own internal stylesheet in a way that the internal style blocks follow the style blocks of the user style sheet (and thereby overwrite them if there is an overlap and if it is possible). If this is true, one could search libnickel (in FW 2.8.1 maybe nickel) for "body, p { line-height: %1em !important; }" and remove !important. Note: I haven't do this myself and therefore don't know whether it works.

Advert

Advert