Epub to Mobi7 conversion --- honoring CSS

GrannyGrump · 07-15-2016, 01:14 AM

I prefer using Calibre to convert epub to old mobi --- it is MUCH more trustworthy to honor my epub css than Kindlegen, which ignores a lot of things (text-indent: 0; top and bottom margins, and others).

I do see one MINOR problem with the Calibre conversion. Horizontal Rules <hr /> never seem to go the full width of the screen even if I specify width: 100%. It is displaying at about 50 - 60% of the width.

I can put up with it even if there is no workaround for this, but can anyone tell me a trick to make the <hr /> go full width?

Thanks for any advice.

kovidgoyal · 07-15-2016, 01:53 AM

Not that I know of, does kindlegen create 100% wide <hr>s?

GrannyGrump · 07-15-2016, 03:09 AM

Well, not 100%. Maybe 90 - 95%.

See attached screen-shots for comparison.

As you can also see, kindlegen ignores my text-indent: 0 and my top and bottom margins. That is why I prefer Calibre. But I do wish the hr was wider.

kovidgoyal · 07-15-2016, 03:13 AM

You sure you dont have any other stylesthat are impacting the hr? WHich kindlegen probably ignores.

Post a sample epub that shows the problem and I'll take a look

GrannyGrump · 07-15-2016, 04:03 AM

Ok, here is the current epub I am working on.

The hr class is in main.css on line 264.

There is another stylesheet, sgc-toc.css with a class for <hr>, but that stylesheet is only linked to the Table of Contents.

Thank you for looking at this for me.

JSWolf · 07-15-2016, 05:02 AM

One thing I find really bad form is multiple CSS. There's no reason for it.

kovidgoyal · 07-15-2016, 10:23 AM

That should take care of it: https://github.com/kovidgoyal/calibr...c57ce60922e5d1

Just FYI, you dont need to specify width 100% for <hr> by default it will take 100% of available width (it is a block element with width set to auto)

theducks · 07-15-2016, 01:42 PM

Quote:

Originally Posted by JSWolf

One thing I find really bad form is multiple CSS. There's no reason for it.

Simplicity.

Dedicated stylesheets for boiler plate sections. Only link the section to the stylesheet NEEDED

JSWolf · 07-15-2016, 05:30 PM

Quote:

Originally Posted by theducks

Simplicity.

Dedicated stylesheets for boiler plate sections. Only link the section to the stylesheet NEEDED

Most publisher CSS use a gross amount of unused classes. A simple CSS can be just one file that encompasses all the classes needed without duplication.

theducks · 07-15-2016, 06:13 PM

Quote:

Originally Posted by JSWolf

Most publisher CSS use a gross amount of unused classes. A simple CSS can be just one file that encompasses all the classes needed without duplication.

And I always wonder why they can't be bothered to run a cleanup utility at the end

It is no like they can't restore a FULL house stylesheet, if the need additional styles for corrections

Wait! Corrections?

We don't need no stinkn' corrections

JSWolf · 07-15-2016, 06:45 PM

Quote:

Originally Posted by theducks

And I always wonder why they can't be bothered to run a cleanup utility at the end

It is no like they can't restore a FULL house stylesheet, if the need additional styles for corrections

Wait! Corrections?

We don't need no stinkn' corrections

Some older devices do slow down with all of these excess CSS classes.

I've seen books where hundreds of classes were deleted from the CSS because the publisher used multiple CSS with way too any excess classes.

theducks · 07-15-2016, 07:31 PM

Quote:

Originally Posted by JSWolf

Some older devices do slow down with all of these excess CSS classes.

I've seen books where hundreds of classes were deleted from the CSS because the publisher used multiple CSS with way too any excess classes.

I agree too many CSS on the SAME file is not

The posters example of the sgc-toc only applies to the (inline) TOC and is not normally linked to the main work.
The result is the main CSS is leaner

because it does not contain code that is only used on one file

JSWolf · 07-16-2016, 06:34 AM

Quote:

Originally Posted by theducks

I agree too many CSS on the SAME file is not

The posters example of the sgc-toc only applies to the (inline) TOC and is not normally linked to the main work.
The result is the main CSS is leaner

because it does not contain code that is only used on one file

But, depending on the CSS used, you coud be duplicating CSS code. Like say you want to same body code.

theducks · 07-16-2016, 12:44 PM

Quote:

Originally Posted by JSWolf

But, depending on the CSS used, you coud be duplicating CSS code. Like say you want to same body code.

So?
it is a few dozen (duplicated) bytes or you would NOT be using a separate sheet.
The days of 4K(words) or CORE are long gone. Saving a hundred bytes is rarely worth a blink.

GrannyGrump · 07-18-2016, 01:13 AM

Quote:

Originally Posted by kovidgoyal

That should take care of it: https://github.com/kovidgoyal/calibr...c57ce60922e5d1

Just FYI, you dont need to specify width 100% for <hr> by default it will take 100% of available width (it is a block element with width set to auto)

Kovid, thank you so much. You're the hero!

(re: width 100% -- I thought I would add that just in case it was a missing link to the problem)

07-15-2016, 01:14 AM	#1
GrannyGrump Obsessively Dedicated... Posts: 3,221 Karma: 35037583 Join Date: May 2011 Location: PA {back in the usa!} Device: Sony PRS-T2, ADE on PC	Epub to Mobi7 conversion --- honoring CSS I prefer using Calibre to convert epub to old mobi --- it is MUCH more trustworthy to honor my epub css than Kindlegen, which ignores a lot of things (text-indent: 0; top and bottom margins, and others). I do see one MINOR problem with the Calibre conversion. Horizontal Rules <hr /> never seem to go the full width of the screen even if I specify width: 100%. It is displaying at about 50 - 60% of the width. I can put up with it even if there is no workaround for this, but can anyone tell me a trick to make the <hr /> go full width? Thanks for any advice.

07-15-2016, 03:09 AM	#3
GrannyGrump Obsessively Dedicated... Posts: 3,221 Karma: 35037583 Join Date: May 2011 Location: PA {back in the usa!} Device: Sony PRS-T2, ADE on PC	Well, not 100%. Maybe 90 - 95%. See attached screen-shots for comparison. As you can also see, kindlegen ignores my text-indent: 0 and my top and bottom margins. That is why I prefer Calibre. But I do wish the hr was wider. Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
epub to azw3 conversion and Extra CSS	Section8	Conversion	8	02-06-2015 11:55 PM
iPad not honoring CSS	uieluck	ePub	5	03-14-2013 01:53 PM
add css file to epub conversion	VICTORSJG	Calibre	0	09-21-2011 07:38 AM
Why, During ePub to ePub Conversion does Calibre changes existing CSS classes?	JSWolf	Conversion	7	08-06-2011 07:32 PM
EPub conversion stylesheet.css problem	nycaleksey	Calibre	1	03-25-2010 11:42 PM

07-15-2016, 01:53 AM	#2
kovidgoyal creator of calibre Posts: 45,347 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Not that I know of, does kindlegen create 100% wide <hr>s?

07-15-2016, 03:13 AM	#4
kovidgoyal creator of calibre Posts: 45,347 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	You sure you dont have any other stylesthat are impacting the hr? WHich kindlegen probably ignores. Post a sample epub that shows the problem and I'll take a look

07-15-2016, 05:02 AM	#6
JSWolf Resident Curmudgeon Posts: 79,750 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	One thing I find really bad form is multiple CSS. There's no reason for it.

07-15-2016, 10:23 AM	#7
kovidgoyal creator of calibre Posts: 45,347 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	That should take care of it: https://github.com/kovidgoyal/calibr...c57ce60922e5d1 Just FYI, you dont need to specify width 100% for <hr> by default it will take 100% of available width (it is a block element with width set to auto)