Margin bug with KF8

JSWolf · 01-25-2017, 02:20 PM

If I have a KF8 with margins in long form, after saving the KF8,the next time I edit the KF8, the margins are in short form. Can this be fixed so the margins are not changed to short form?

Also, I'd like to be able to have the editor change short form margins to long form margins.

kovidgoyal · 01-25-2017, 10:05 PM

I cannot replicate this, steps I tried:

1) Open an azw3 file
2) Edit the stylesheet adding the following to one of the rules
margin-top: 0;
margin-bottom: 0;
3) Save
4) Close book
5) Re-open
6) Stylesheet still has
margin-top: 0;
margin-bottom: 0;

kovidgoyal · 01-25-2017, 10:08 PM

IIRC this is controlled by Preferences->Common Options->Look & Feel->Expand CSS

kovidgoyal · 01-25-2017, 10:15 PM

And this commit should ensure it does not happen regardless of that setting: https://github.com/kovidgoyal/calibr...a029fa488f37de

pdurrant · 01-26-2017, 04:54 AM

While I applaud the responsiveness, is this really a good change? There's already an option that prevents this happening, if people don't want it. Why add a special option for AZW3 that stops the automatic tidy of CSS with no way to override?

(As far as I know, Kindle does not require that the CSS margins be given separately.)

JSWolf · 01-26-2017, 05:31 AM

Quote:

Originally Posted by kovidgoyal

IIRC this is controlled by Preferences->Common Options->Look & Feel->Expand CSS

Yes, this is already set.

I just converted an ePub to KF8.

Here is the KF8's main CSS as it is just after loading into the editor.

Code:

.bep {
    display: block;
    font-family: ChareInk;
    margin-bottom: 0;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 4em;
    text-align: justify;
    text-indent: 0
    }
.bepc {
    display: block;
    font-family: ChareInk;
    margin-bottom: 0;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 0;
    text-align: right;
    text-indent: 0
    }
.bio_ {
    display: block;
    font-family: TradeBio;
    font-size: 0.75em;
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center;
    text-indent: 1.2em
    }
.bio_1 {
    display: block;
    font-family: TradeBio;
    font-size: 1.41667em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center;
    text-indent: 1.2em
    }
.bmtx {
    display: block;
    font-family: ChareInk;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: justify;
    text-indent: 1.2em
    }
.calibre {
    display: block;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    oeb-column-number: 1;
    orphans: 1;
    padding-left: 0;
    padding-right: 0;
    text-align: justify;
    widows: 1
    }
.calibre1 {
    display: block;
    font-family: ChareInk;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-indent: 1.2em
    }
.calibre2 {
    display: block
    }
.calibre3 {
    line-height: 1
    }
.calibre4 {
    height: auto;
    width: auto
    }
.cl {
    display: block;
    font-family: ChareInk;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 0;
    page-break-after: avoid;
    text-indent: 0
    }
.cl1 {
    display: block;
    font-family: ChareInk;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 1.2em;
    page-break-after: avoid;
    text-indent: 0
    }
.clot {
    display: block;
    font-family: ChareInk;
    margin-bottom: 0;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 0;
    text-align: justify;
    text-indent: 0
    }
.cltxl {
    display: block;
    font-family: ChareInk;
    margin-bottom: 1.2em;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 0;
    text-align: justify;
    text-indent: 1.2em
    }
.cr {
    display: block;
    font-family: ChareInk;
    font-size: 0.75em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-indent: 0
    }
.crl {
    display: block;
    font-family: ChareInk;
    font-size: 0.75em;
    margin-bottom: 0.8em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-indent: 0
    }
.crlo {
    display: block;
    font-family: ChareInk;
    font-size: 0.75em;
    margin-bottom: 0.2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.8em;
    text-indent: 0
    }
.ded {
    display: block;
    font-family: ChareInk;
    font-style: italic;
    margin-bottom: 0;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 4em;
    text-align: center;
    text-indent: 0
    }
.fmh {
    display: block;
    font-family: CalcitePro, sans-serif;
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0.8em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.8em;
    text-align: center;
    text-indent: 0
    }
.fmot {
    display: block;
    font-family: ChareInk;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: justify;
    text-indent: 0
    }
.imagefp {
    height: 100%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center;
    width: auto
    }
.ipadfp {
    display: block;
    height: 100%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center
    }
.italic {
    font-style: italic;
    font-weight: normal
    }
.regular {
    font-family: ChareInk;
    font-style: normal;
    font-weight: normal
    }
.txb {
    border-bottom-color: currentColor;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-left-color: currentColor;
    border-left-style: solid;
    border-left-width: 2px;
    border-right-color: currentColor;
    border-right-style: solid;
    border-right-width: 2px;
    border-top-color: currentColor;
    border-top-style: solid;
    border-top-width: 2px;
    color: #6B6D73;
    display: block;
    height: 2px;
    margin-bottom: 1em;
    margin-left: 40%;
    margin-right: 40%;
    margin-top: 1em
    }

Here is the same CSS after editing one of the XMLfiles.

Code:

.bep {
  display: block;
  font-family: ChareInk;
  text-align: justify;
  text-indent: 0;
  margin: 4em 1.5em 0;
}
.bepc {
  display: block;
  font-family: ChareInk;
  text-align: right;
  text-indent: 0;
  margin: 0 1.5em;
}
.bio_ {
  display: block;
  font-family: TradeBio;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  text-indent: 1.2em;
  margin: 1em 0 0;
}
.bio_1 {
  display: block;
  font-family: TradeBio;
  font-size: 1.41667em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-indent: 1.2em;
  margin: 0;
}
.bmtx {
  display: block;
  font-family: ChareInk;
  text-align: justify;
  text-indent: 1.2em;
  margin: 0;
}
.calibre {
  display: block;
  font-size: 1em;
  oeb-column-number: 1;
  orphans: 1;
  padding-left: 0;
  padding-right: 0;
  text-align: justify;
  widows: 1;
  margin: 0;
}
.calibre1 {
  display: block;
  font-family: ChareInk;
  text-indent: 1.2em;
  margin: 0;
}
.calibre2 {
  display: block;
}
.calibre3 {
  line-height: 1;
}
.calibre4 {
  height: auto;
  width: auto;
}
.cl {
  display: block;
  font-family: ChareInk;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  page-break-after: avoid;
  text-indent: 0;
  margin: 0 1.5em 1em;
}
.cl1 {
  display: block;
  font-family: ChareInk;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  page-break-after: avoid;
  text-indent: 0;
  margin: 1.2em 1.5em 1em;
}
.clot {
  display: block;
  font-family: ChareInk;
  text-align: justify;
  text-indent: 0;
  margin: 0 1.5em;
}
.cltxl {
  display: block;
  font-family: ChareInk;
  text-align: justify;
  text-indent: 1.2em;
  margin: 0 1.5em 1.2em;
}
.cr {
  display: block;
  font-family: ChareInk;
  font-size: 0.75em;
  text-indent: 0;
  margin: 0;
}
.crl {
  display: block;
  font-family: ChareInk;
  font-size: 0.75em;
  text-indent: 0;
  margin: 0 0 0.8em;
}
.crlo {
  display: block;
  font-family: ChareInk;
  font-size: 0.75em;
  text-indent: 0;
  margin: 0.8em 0 0.2em;
}
.ded {
  display: block;
  font-family: ChareInk;
  font-style: italic;
  text-align: center;
  text-indent: 0;
  margin: 4em 1.5em 0;
}
.fmh {
  display: block;
  font-family: CalcitePro, sans-serif;
  font-size: 2em;
  line-height: 1;
  text-align: center;
  text-indent: 0;
  margin: 0.8em 0;
}
.fmot {
  display: block;
  font-family: ChareInk;
  text-align: justify;
  text-indent: 0;
  margin: 0;
}
.imagefp {
  height: 100%;
  text-align: center;
  width: auto;
  margin: 0;
}
.ipadfp {
  display: block;
  height: 100%;
  text-align: center;
  margin: 0;
}
.italic {
  font-style: italic;
  font-weight: normal;
}
.regular {
  font-family: ChareInk;
  font-style: normal;
  font-weight: normal;
}
.txb {
  color: #6B6D73;
  display: block;
  height: 2px;
  border: currentColor solid 2px;
  margin: 1em 40%;
}

The editor is not respecting the expand CSS option in preferences.

The reason want this is because sometimes I convert for someone who has a Kindle and I use negative left/right margins to lessen the margins on screen. So doing a search/replace of left/right margins of 0 to -45px works well.

JSWolf · 01-26-2017, 05:42 AM

Quote:

Originally Posted by pdurrant

While I applaud the responsiveness, is this really a good change? There's already an option that prevents this happening, if people don't want it. Why add a special option for AZW3 that stops the automatic tidy of CSS with no way to override?

(As far as I know, Kindle does not require that the CSS margins be given separately.)

Problem is that the editor converts long form CSS to short form CSS even if expand CSS is selected. When I have expand CSS selected, with ePub, the margins are left as is. Should they be expanded on save? Even with expand CSS not selected, the ePub margins are left as they are on save. They are not changed at all.

Having expand CSS checked makes no difference to how the edtior handles CSS when it save. ePub margins stay the same and KF8 margins become short form if they are in long form.

pdurrant · 01-26-2017, 05:45 AM

Quote:

Originally Posted by JSWolf

Problem is that the editor converts long form CSS to short form CSS even if expand CSS is selected.

That certainly sounds like a bug. If so, I'm surprised that Kovid couldn't reproduce. Perhaps you could create a small demo AZW3 file?

Because if there is a bug preventing the expandCSS flag from working, it might also affect the fix Kovid just tried.

JSWolf · 01-26-2017, 05:45 AM

Quote:

Originally Posted by kovidgoyal

And this commit should ensure it does not happen regardless of that setting: https://github.com/kovidgoyal/calibr...a029fa488f37de

Thank you.

kovidgoyal · 01-26-2017, 09:01 AM

Quote:

Originally Posted by pdurrant

While I applaud the responsiveness, is this really a good change? There's already an option that prevents this happening, if people don't want it. Why add a special option for AZW3 that stops the automatic tidy of CSS with no way to override?

(As far as I know, Kindle does not require that the CSS margins be given separately.)

Because the editor is designed to make as few automatic, silent changes as possible -- with azw3 some level of change is inevitable, because of the nature of the format, but this particular one is not neccessary.

pdurrant · 01-26-2017, 09:09 AM

Quote:

Originally Posted by kovidgoyal

Because the editor is designed to make as few automatic, silent changes as possible -- with azw3 some level of change is inevitable, because of the nature of the format, but this particular one is not neccessary.

That makes a lot of sense. Thanks.

Brett Merkey · 01-29-2017, 08:37 AM

The conversion process messes up margin code in one significant way:
margin: 1em auto;
gets converted to:
margin-bottom: 1em;
margin-top: 1em;

By eliminating the default "auto" value, any element meant to be centered (because a width is specified) usually gets uncentered.

pdurrant · 01-29-2017, 09:58 AM

Quote:

Originally Posted by Brett Merkey

The conversion process messes up margin code in one significant way:
margin: 1em auto;
gets converted to:
margin-bottom: 1em;
margin-top: 1em;

By eliminating the default "auto" value, any element meant to be centered (because a width is specified) usually gets uncentered.

I suggest you report this as a bug.

Kovid may well not notice just a mention of it in a thread

kovidgoyal · 01-29-2017, 10:06 AM

I cannot reproduce that, converting the following html

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>t</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div style="margin: 1em auto">centered</div>
    </body>
</html>

with

ebook-convert file.html .azw3 --expand-css

results in the following css in the azw3

Code:

.calibre1 {
    display: block;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em
    }

Brett Merkey · 01-29-2017, 01:02 PM

Perhaps the behavior is not present in current versions. I am still at 2.67(64bit). At the moment, this epub structure:
.separator {
background-image: url(divider04a.jpg);
background-repeat: no-repeat;
height: 37px;
width: 200px;
margin: 1em auto;
}

gets changed in conversion to azw3 as:
.separator {
background-image: url("../images/00001.jpeg");
background-repeat: no-repeat;
display: block;
height: 37px;
margin-bottom: 1em;
margin-top: 1em;
width: 200px
}

01-25-2017, 02:20 PM	#1
JSWolf Resident Curmudgeon Posts: 79,755 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Margin bug with KF8 If I have a KF8 with margins in long form, after saving the KF8,the next time I edit the KF8, the margins are in short form. Can this be fixed so the margins are not changed to short form? Also, I'd like to be able to have the editor change short form margins to long form margins.

01-29-2017, 10:06 AM	#14
kovidgoyal creator of calibre Posts: 45,349 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	I cannot reproduce that, converting the following html Code: <!DOCTYPE html> <html> <head> <title>t</title> <meta charset="utf-8" /> </head> <body> <div style="margin: 1em auto">centered</div> </body> </html> with ebook-convert file.html .azw3 --expand-css results in the following css in the azw3 Code: .calibre1 { display: block; margin-bottom: 1em; margin-left: auto; margin-right: auto; margin-top: 1em }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Bug converting html css text-indent and left-margin	bhoyt	Conversion	15	01-24-2014 07:28 PM
Troubleshooting Bug in KF8 firmware for eInk Kindles?	JSWolf	Amazon Kindle	6	01-13-2013 09:41 AM
Calibre has a serious bug with KF8 & embedded fonts	JSWolf	Conversion	4	07-08-2012 10:26 PM
First table row on page sometimes loses bottom margin - is this a bug?	Novelest	ePub	4	05-14-2012 02:23 PM
Margin bug in ePub	JSWolf	Conversion	0	07-31-2011 01:29 PM

01-25-2017, 10:05 PM	#2
kovidgoyal creator of calibre Posts: 45,349 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	I cannot replicate this, steps I tried: 1) Open an azw3 file 2) Edit the stylesheet adding the following to one of the rules margin-top: 0; margin-bottom: 0; 3) Save 4) Close book 5) Re-open 6) Stylesheet still has margin-top: 0; margin-bottom: 0;

01-25-2017, 10:08 PM	#3
kovidgoyal creator of calibre Posts: 45,349 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	IIRC this is controlled by Preferences->Common Options->Look & Feel->Expand CSS

01-25-2017, 10:15 PM	#4
kovidgoyal creator of calibre Posts: 45,349 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	And this commit should ensure it does not happen regardless of that setting: https://github.com/kovidgoyal/calibr...a029fa488f37de

01-26-2017, 04:54 AM	#5
pdurrant The Grand Mouse 高貴的老鼠 Posts: 73,946 Karma: 315160596 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Oasis	While I applaud the responsiveness, is this really a good change? There's already an option that prevents this happening, if people don't want it. Why add a special option for AZW3 that stops the automatic tidy of CSS with no way to override? (As far as I know, Kindle does not require that the CSS margins be given separately.)

01-29-2017, 08:37 AM	#12
Brett Merkey Not Quite Dead Posts: 195 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	The conversion process messes up margin code in one significant way: margin: 1em auto; gets converted to: margin-bottom: 1em; margin-top: 1em; By eliminating the default "auto" value, any element meant to be centered (because a width is specified) usually gets uncentered.

01-29-2017, 01:02 PM	#15
Brett Merkey Not Quite Dead Posts: 195 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	Perhaps the behavior is not present in current versions. I am still at 2.67(64bit). At the moment, this epub structure: .separator { background-image: url(divider04a.jpg); background-repeat: no-repeat; height: 37px; width: 200px; margin: 1em auto; } gets changed in conversion to azw3 as: .separator { background-image: url("../images/00001.jpeg"); background-repeat: no-repeat; display: block; height: 37px; margin-bottom: 1em; margin-top: 1em; width: 200px }

Advert

Advert