Margins, CSS, and the Glo.

hleo12 · 08-12-2014, 12:49 PM

The last time I was forced to learn html was back in my senior year of high school. The time when CSS was important because of friendster...

Anyway, lately, I've been learning some basic CSS stuff to edit some books that I'm reading. Either they have too much margin, or too much space between paragraphs, or there's no indentation.

So I make it a habit to edit the poorly formatted books that I have.

They worked great before, but now, with a particular book, there have been some characters that were cut off when displayed on my Glo. I know that there have been some reports where some italicized letters (like 'f') are cut off when placed at the right margin.

Now, though, it seems worse. Some regular formatted letters are cut off, sometimes a whole letter itself is missing. And for some reason, when I highlight the word, it doesn't give me a dictionary pop-up. But when I click add note, the word is recognized properly.

I just can't think of anything that might've caused this.

My Glo's margin slider is all the way to the left, but even if I increase it, it will sometimes leave some lines going through the margin.

Here's the CSS that I use. It's pretty much basic, just enough to correctly format the text so they'll look more like books...

Code:

p {
text-align: justify;
text-indent: 1.5em;
line-height: 100%;
margin: 0 0;
}
p.first {
text-align: justify;
text-indent: 0em;
line-height: 100%;
margin: 0 0;
}

davidfor · 08-12-2014, 08:26 PM

The only time I notice this is with kepubs, sideloaded or purchased, and when I have the hidden full screen reading option turned on. I don't justify the text, but I think it makes this problem worse.

As to styles, the ones that get into all my books are:

Code:

body {
  display: block;
  margin-bottom: 0;
  margin-top: 0;
  text-indent: 1.2em;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
  widows: 1;
  orphans: 1;
}
.sceneBreak {
  margin-top: 2em;
  text-indent: 0;
}
h2 + p, h3 + p, h4 + p, hr + p {
  text-indent: 0;
}

I sometimes change the value for the text-indent and sceneBreak margin-top depending on how I feel and if the original version seemed to have a particular style.

DNSB · 08-12-2014, 09:09 PM

Quote:

Originally Posted by davidfor

The only time I notice this is with kepubs, sideloaded or purchased, and when I have the hidden full screen reading option turned on. I don't justify the text, but I think it makes this problem worse.

As to styles, the ones that get into all my books are:

Code:

body {
  display: block;
  margin-bottom: 0;
  margin-top: 0;
  text-indent: 1.2em;
}

I sometimes change the value for the text-indent and sceneBreak margin-top depending on how I feel and if the original version seemed to have a particular style.

Hmmm... my body style is a bit different but then I use different classes for different areas especially the full page images so almost always use <body class='tag">. Some of the items are due more to having adding them once and never removing them than to any real functionality.

Code:

.epub  {
    display : block;
    font-size : 1em;
    margin : 0 0 0 0;
    padding : 0 0 0 0;
    text-align : left;
    widows : 1;
    orphans : 1;
    -epub-hyphens : auto;
    -webkit-hyphens : auto;
    adobe-hyphenate : auto;
    }

Regards,
David

GeoffR · 08-13-2014, 05:14 AM

Quote:

Originally Posted by hleo12

Code:

p {
text-align: justify;
text-indent: 1.5em;
line-spacing: 100%;
margin: 0 0;
}
p.first {
text-align: justify;
text-indent: 0em;
line-spacing: 100%;
margin: 0 0;
}

Probably not the cause of your problem, but line-spacing is not a CSS property.

hleo12 · 08-13-2014, 09:25 AM

Quote:

Originally Posted by GeoffR

Probably not the cause of your problem, but line-spacing is not a CSS property.

yeah, sorry. I just mistyped in but it's line-height in all of my css files... Anyway the post is edited now...

On a different note, has there been any work-around for the fullscreen text cutoff with KePubs?

JSWolf · 08-13-2014, 09:31 AM

You don't need a line-height of 100%. It can be removed.

hleo12 · 08-14-2014, 02:52 AM

Thanks guys... I'll be sure to steal those CSS codes... On a happier note, it seems that it really was only happening in that particular book.

JSWolf · 08-14-2014, 04:46 PM

When you have a problem, the thing to do is to check out that particular ePub. There are lots of way to improperly code the CSS.

DNSB · 08-14-2014, 11:49 PM

Quote:

Originally Posted by JSWolf

When you have a problem, the thing to do is to check out that particular ePub. There are lots of way to improperly code the CSS.

Or for even more fun, try coding the CSS to work properly on multiple devices AND remain standards compliant. Herding cats at it's best.

Regards,
David

08-12-2014, 12:49 PM	#1
hleo12 Guru Posts: 655 Karma: 5078890 Join Date: Feb 2014 Device: Kobo Glo (deceased), Kindle 4th, Kindle Basic 10th Generation	Margins, CSS, and the Glo. The last time I was forced to learn html was back in my senior year of high school. The time when CSS was important because of friendster... Anyway, lately, I've been learning some basic CSS stuff to edit some books that I'm reading. Either they have too much margin, or too much space between paragraphs, or there's no indentation. So I make it a habit to edit the poorly formatted books that I have. They worked great before, but now, with a particular book, there have been some characters that were cut off when displayed on my Glo. I know that there have been some reports where some italicized letters (like 'f') are cut off when placed at the right margin. Now, though, it seems worse. Some regular formatted letters are cut off, sometimes a whole letter itself is missing. And for some reason, when I highlight the word, it doesn't give me a dictionary pop-up. But when I click add note, the word is recognized properly. I just can't think of anything that might've caused this. My Glo's margin slider is all the way to the left, but even if I increase it, it will sometimes leave some lines going through the margin. Here's the CSS that I use. It's pretty much basic, just enough to correctly format the text so they'll look more like books... Code: p { text-align: justify; text-indent: 1.5em; line-height: 100%; margin: 0 0; } p.first { text-align: justify; text-indent: 0em; line-height: 100%; margin: 0 0; } Last edited by hleo12; 08-13-2014 at 09:20 AM.

08-12-2014, 08:26 PM	#2
davidfor Grand Sorcerer Posts: 24,905 Karma: 47303824 Join Date: Jul 2011 Location: Sydney, Australia Device: Kobo:Touch,Glo, AuraH2O, GloHD,AuraONE, ClaraHD, Libra H2O; tolinoepos	The only time I notice this is with kepubs, sideloaded or purchased, and when I have the hidden full screen reading option turned on. I don't justify the text, but I think it makes this problem worse. As to styles, the ones that get into all my books are: Code: body { display: block; margin-bottom: 0; margin-top: 0; text-indent: 1.2em; } p { margin-top: 0; margin-bottom: 0; text-indent: 1.2em; widows: 1; orphans: 1; } .sceneBreak { margin-top: 2em; text-indent: 0; } h2 + p, h3 + p, h4 + p, hr + p { text-indent: 0; } I sometimes change the value for the text-indent and sceneBreak margin-top depending on how I feel and if the original version seemed to have a particular style.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Margins css changed in v1.27?	VirgoGirl	Calibre	4	04-02-2014 12:32 PM
userstyle.css and epub margins	tselling	Sony Reader Dev Corner	8	10-28-2010 01:51 PM
Is there a way to over ride CSS Margins	gandor62	Calibre	0	09-21-2010 09:40 PM
css override code for margins?	Amalthia	Calibre	15	08-11-2009 07:20 PM

08-13-2014, 09:31 AM	#6
JSWolf Resident Curmudgeon Posts: 79,745 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You don't need a line-height of 100%. It can be removed.

08-14-2014, 02:52 AM	#7
hleo12 Guru Posts: 655 Karma: 5078890 Join Date: Feb 2014 Device: Kobo Glo (deceased), Kindle 4th, Kindle Basic 10th Generation	Thanks guys... I'll be sure to steal those CSS codes... On a happier note, it seems that it really was only happening in that particular book.

08-14-2014, 04:46 PM	#8
JSWolf Resident Curmudgeon Posts: 79,745 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	When you have a problem, the thing to do is to check out that particular ePub. There are lots of way to improperly code the CSS.

Advert

Advert