CSS Question

[hobnail]

Originally Posted by DNSB

The letter sentence requires a p tag for the "div.letter p" to apply -- it applies to p elements inside a div element.

What I meant is if I change the css for div.letter to

div.letter { font-style: italic; hyphens: none; }

I.e., no space p, it doesn't get the italics. But never mind, I figured it out; I have some "reset" css at the top and for p it sets font-style: normal but it doesn't set font-family.

[hobnail]

Originally Posted by thiago.eec

If using HTML5 (Epub3), you can use <aside> and <article> for those.

Maybe, maybe not. It seems a bit fuzzy to me since a letter may be in response to things happening in the book and w3schools says for the article tag, "The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site." While for the aside tag it says "The <aside> tag defines some content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content." My take is that they're for specific uses and not for random stuff that should be set differently with indents and whatnot.

I was using blockquote, following what StandardEbooks does but someone pointed to me that that's semantically incorrect. Reading the spec you almost should always have a cite with a blockquote.

[hobnail]

Originally Posted by phossler

Is there a quick list of the differences between the epub2 and epub3 specifications? (Maybe EPUB3 for Dummies??)

The only thing that matters to me is that I can use html5. And there isn't much of html5 that I use but it's nice to not be stuck with the old html the old epub uses. I used to go buck wild and use things like section, header, footer, and whatnot but I eventually felt like it was being fancy for no other purpose than to be fancy. I think the only html5 thing I use is header; sometimes there is poetry or a quote after a chapter title and I wrap both the h2 and poetry/quote in a header.

[hobnail]

Originally Posted by DNSB

The problem for me is that when I work on other people's ebooks, I have to keep almost everything to the lowest common denominator. If I use an epub3 only feature, I have to make sure that it looks good on epub2, epub3, azw3 and (blechh...) even mobi. KISS is the mantra.

I suspect that if you use a "reset" that ereaders that don't know epub3 will at least render the unknown tags reasonably. For example, I use

article, aside, figcaption, figure, footer, header, main, nav, section {
  display: block;
}

address, article, aside, blockquote, canvas, dd, details, div, dl, dt, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, ol, p, pre, section, summary, ul {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-style: normal;
  font-weight: normal;
}

a, abbr, b, bdi, bdo, cite, code, data, del, dfn, em, i, ins, kbd, mark, q, rp, rt, rtc, ruby, s, samp, small, span, strong, sub, sup, time, var {
  font-size: inherit;
  vertical-align: baseline;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

Which I copied from the blitz site.

[DNSB]

Originally Posted by hobnail

I suspect that if you use a "reset" that ereaders that don't know epub3 will at least render the unknown tags reasonably. For example, I use

article, aside, figcaption, figure, footer, header, main, nav, section {
  display: block;
}

address, article, aside, blockquote, canvas, dd, details, div, dl, dt, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, ol, p, pre, section, summary, ul {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-style: normal;
  font-weight: normal;
}

a, abbr, b, bdi, bdo, cite, code, data, del, dfn, em, i, ins, kbd, mark, q, rp, rt, rtc, ruby, s, samp, small, span, strong, sub, sup, time, var {
  font-size: inherit;
  vertical-align: baseline;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

Which I copied from the blitz site.

Personally, I find the reset code almost useless and unneeded.

If I recall correctly, an epub2 renderer is supposed to disregard any elements and attributes it doesn't understand. The problem there is that if you are using the epub3 element for a purpose, now it doesn't happen and that can lead to an ugly rendering of the page. To fix this, you can end up with workaround code which is a pain to maintain since it may not render even close to the same on multiple devices/apps.

[hobnail]

Originally Posted by DNSB

Personally, I find the reset code almost useless and unneeded.

If I recall correctly, an epub2 renderer is supposed to disregard any elements and attributes it doesn't understand. The problem there is that if you are using the epub3 element for a purpose, now it doesn't happen and that can lead to an ugly rendering of the page. To fix this, you can end up with workaround code which is a pain to maintain since it may not render even close to the same on multiple devices/apps.

Could be. It's only in epubs I've made where I started from scratch, e.g., a pdf from the internet archive or a Project Gutenberg book.

When I upload them here I only upload the epub and I figure if someone's looking for the book in kindle format they can download the epub and convert it in calibre. That's rather cavalier and they probably don't realize that they should look in both the kindle and epub book lists. I've wondered if I could put a stub in the kindle books forum pointing to the epub book with a note saying that they can convert the epub to kindle, but I'm not sure that would fly with the moderators. Then that got me to thinking that mobileread could provide that service (and encourage people to only upload epubs); there are web sites that do conversions and are using calibre on the back end.

[DNSB]

Originally Posted by hobnail

Could be. It's only in epubs I've made where I started from scratch, e.g., a pdf from the internet archive or a Project Gutenberg book.

When I upload them here I only upload the epub and I figure if someone's looking for the book in kindle format they can download the epub and convert it in calibre. That's rather cavalier and they probably don't realize that they should look in both the kindle and epub book lists. I've wondered if I could put a stub in the kindle books forum pointing to the epub book with a note saying that they can convert the epub to kindle, but I'm not sure that would fly with the moderators. Then that got me to thinking that mobileread could provide that service (and encourage people to only upload epubs); there are web sites that do conversions and are using calibre on the back end.

For my personal use edits, I tend to follow a selfish pattern of does it work on my Kobo as epub and kepub. For work I'm doing for other people, it's a different matter since I don't have to worry about Amazon sending me KQN notices that my personal use books are poorly formatted, need spell checking, etc. but an author does.

Hmmm.... KQN notices? Isn't KQN Kindle Quality Notice so I'm being redundant? Like the old SUB building at UBC? SUB is student union building.

Though this discussion had me going back to SlushPile Hell for a quick revisit.

Time to get some sleep. 27 hours is too long.

[deback]

Originally Posted by phossler

I have <p> with text-indent = 2em since the vast majority of the time that's the default for a basic text paragraph.

Sometimes however (usually for a a group specially formatted paragraphs I use <p class="noindent">

I've tried to bracket a group with <div class="noindent"> ... </div> but the class seems to be ignored. If I can't do that, is there another way to 'turn off' indenting for a block of paragraphs?

Spoiler:

@charset "utf-8";
/* Styles for Test_CSS */
p {
text-indent: 2em;
}
.noindent {
text-indent: 0em;
}

and

Spoiler:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<title>Test_CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>

<body>

<h1>Test_CSS</h1>

<p>Some indented text </p>
<p>Some indented text </p>
<p>Some indented text </p>

<div class = "noindent">
<p>Some not indented text </p>
<p>Some not indented text </p>
<p>Some not indented text </p>
</div>

</body>

</html>

Change the following:

.noindent {
text-indent: 0em;
}

to this:

.noindent {
text-indent: 0;
}

When the value is 0, you never add the "em." It should work fine after you delete the "em." You should also change the <p> for the nonindented paragraphs to something like: <p class="noindent"> and don't use the <div> line at the top. It's best to assign a class to each kind of paragraph, etc. One for indents (the common indent is 1.2em, not 2em) and one for nonindents. Then you won't need the <div> lines, which only adds clutter to your file.

[hobnail]

Originally Posted by deback

When the value is 0, you never add the "em." It should work fine after you delete the "em."

My memory is that the unit, em in this case, is harmless/ignored when the value is 0. You could use feet, kilometers, light years, and 0 whatevers is still 0.

[JSWolf]

Originally Posted by phossler

Does the Calibre editor support epub3?

Is there a quick list of the differences between the epub2 and epub3 specifications? (Maybe EPUB3 for Dummies??)

Right now for things like letters, signs, telegrams, etc. I have various flavors of .blockquote so it'd be nice if I could simplify my CSS with things like <atricle. and <aside>

<article> and <aside> aren't going to simplify anything. I use my default settings for <blockquote> and classes if i have to make any changes to that. It's about as simple as it gets.

[hobnail]

Originally Posted by deback

You should also change the <p> for the nonindented paragraphs to something like: <p class="noindent"> and don't use the <div> line at the top. It's best to assign a class to each kind of paragraph, etc. One for indents (the common indent is 1.2em, not 2em) and one for nonindents.

My preference is to use combinators and do not use, what are to me, unnecessary classes on tags. In my stylesheet.css I have

p {
    margin: 0;
    padding: 0;
    text-indent: 2em;
}

dl + p,
hr + p,
header + p,
p:first-child,
table + p  {
    margin-top: 1.0em;
    text-indent: 0em;
}

The plus means "immediately following", so no indent after a dl, or after an hr, or after a header (I wrap h tags in header tags), or after a table, and p:first-child I think means the first one in whatever it's inside of (body, div, etc.). I do have a .noindent class but I rarely use it; most of my p tags, as well as all of the others, are naked. This also ensures consistency and I don't have to worry about having forgotten to add a class to a tag.

[JSWolf]

Originally Posted by hobnail

My preference is to use combinators and do not use, what are to me, unnecessary classes on tags. In my stylesheet.css I have

p {
    margin: 0;
    padding: 0;
    text-indent: 2em;
}

dl + p,
hr+ p,
header + p,
p:first-child,
table + p  {
    margin-top: 1.0em;
    text-indent: 0em;
}

The plus means "immediately following", so no indent after a dl, or after an hr, or after a header (I wrap h tags in header tags), or after a table, and p:first-child I think means the first one in whatever it's inside of (body, div, etc.). I do have a .noindent class but I rarely use it; most of my p tags, as well as all of the others, are naked. This also ensures consistency and I don't have to worry about having forgotten to add a class to a tag.

You have to be very careful using something like p:first-child, as it may not work in some older versions of ADE and in that cases, will cause many people a problem. I could be misremembering. You'd have to test this with ADE 2.0.1. The problem is that ADE is what you have to work with to make sure your code works. If it doesn't work in ADE 2.0.1, then you have to find another way to do what you want.

[deback]

Originally Posted by hobnail

My memory is that the unit, em in this case, is harmless/ignored when the value is 0. You could use feet, kilometers, light years, and 0 whatevers is still 0.

I'm pretty sure it won't work if you include the "em" when the value is 0. That is, the intended effect for that class will not happen if you include the "em" when the value is 0.

[deback]

Originally Posted by hobnail

My preference is to use combinators and do not use, what are to me, unnecessary classes on tags.

Well, I like to keep it simple, so I use a different class for each type of paragraph or item for each of the pages. I use names that are easy to remember and use a template file that I can quickly copy and paste into a CSS file (all pasted over the .calibre class) for classes, such as: desc, desc1, epi, epi1, acks, acks1, contents, contents1, chapter, chapter1, ni, text, title, author, publ, etc. This makes it very easy and quick when editing an ePub file. I use find and replace a lot when cleaning up the messy codes that I find so often in poorly formatted files.

[thiago.eec]

Originally Posted by deback

I'm pretty sure it won't work if you include the "em" when the value is 0. That is, the intended effect for that class will not happen if you include the "em" when the value is 0.

I beg to differ. It works just fine using this:

p {
   text-indent: 0em;
}

Also, see the CSS specification:

4.3.2 Lengths
Lengths refer to distance measurements.

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

https://www.w3.org/TR/CSS22/syndata.html#length-units