CSS Question

[DNSB]

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 just checked and it worked with cm, mm, in, px, pt, pc, em, ex, ch, rem and % in calibre's editor and Sigil's preview. Basically, all the measurement units that I could remember. It seems as if 0 time anything is 0.

[phossler]

@JSWolf --

<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.

Admittedly there are other ways to do this, but I am finding that using a couple of the new tags makes the CSS a little more explanatory

aside {
  text-indent: 0;
  width: 30%;
  margin: 0 0.25em 0.25em 0;
  float: right;
  padding: 0.2em 0.2em 0.2em 0.4em;
  border: thin black solid;
  background-color: #EEE;
}
article {
  text-indent: 0;
  margin: 0 1m 0 0.25em;
  padding: 0.2em 0.2em 0.6em 1em;
  border-top: thin black solid;
  border-left: thin black solid;
  border-bottom: medium black solid;
  border-right: medium black solid;
  background-color: #EEE;
}
/* -------------------------------------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------  figures and captions */
/* -------------------------------------------------------------------------------------------------------*/
/* usage
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
*/
figure {
  page-break-inside: avoid;
  width: 90%;
  border: thin silver solid;
  padding: 0.5em;
  text-align: center;
  margin: 1em 5% 0 5%;
}
figure img {
  width: 90%;
}
figure p {
  text-align: left;
  font-style: normal;
  font-size: smaller;
  text-indent: 0;
  margin-top: 0.5em;
  margin-bottom: 0;
}
figcaption {
  text-align: left;
  font-style: italic;
  font-size: 0.9em;
  text-indent: 0;
  margin: 0 0 0 1em;
}

[hobnail]

Originally Posted by phossler

Admittedly there are other ways to do this, but I am finding that using a couple of the new tags makes the CSS a little more explanatory

That's one of the main reasons for tags like those, semantics. They also help software that analyzes/parses html for rss feeds, databases, and other things.

[thiago.eec]

Originally Posted by deback

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.

Like @hobnail, I'd rather use as less classes as possible. A code with little classes is so much more readable and elegant. I hate to see standard paragraphs with classes. It really should be just <p>.

Look at the screenshot. I have drop caps, indentation, ruler, headers, and just a single class for an specific case.

[JSWolf]

Originally Posted by phossler

@JSWolf --




Admittedly there are other ways to do this, but I am finding that using a couple of the new tags makes the CSS a little more explanatory

aside {
  text-indent: 0;
  width: 30%;
  margin: 0 0.25em 0.25em 0;
  float: right;
  padding: 0.2em 0.2em 0.2em 0.4em;
  border: thin black solid;
  background-color: #EEE;
}
article {
  text-indent: 0;
  margin: 0 1m 0 0.25em;
  padding: 0.2em 0.2em 0.6em 1em;
  border-top: thin black solid;
  border-left: thin black solid;
  border-bottom: medium black solid;
  border-right: medium black solid;
  background-color: #EEE;
}
/* -------------------------------------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------  figures and captions */
/* -------------------------------------------------------------------------------------------------------*/
/* usage
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
*/
figure {
  page-break-inside: avoid;
  width: 90%;
  border: thin silver solid;
  padding: 0.5em;
  text-align: center;
  margin: 1em 5% 0 5%;
}
figure img {
  width: 90%;
}
figure p {
  text-align: left;
  font-style: normal;
  font-size: smaller;
  text-indent: 0;
  margin-top: 0.5em;
  margin-bottom: 0;
}
figcaption {
  text-align: left;
  font-style: italic;
  font-size: 0.9em;
  text-indent: 0;
  margin: 0 0 0 1em;
}

I've just done a test and your CSS code isn't going to work. I tried your article CSS code and it was a big failure with ADE 2.0.1. That means that you cannot use it because it's not backwards compatible. You have to test your code to see if it is backwards compatible. ADE 2.0.1 is the benchmark for backwards comparability. This is why I don't do things like that. I know my code is compatible.

You have to blame the companies who use RMSDK but have not kept it updated for your code failure.

[deback]

Originally Posted by DNSB

I just checked and it worked with cm, mm, in, px, pt, pc, em, ex, ch, rem and % in calibre's editor and Sigil's preview. Basically, all the measurement units that I could remember. It seems as if 0 time anything is 0.

Okay, never mind. I was thinking that I had a problem with using "em" after 0 at some time in the past, but it doesn't seem like it would make any difference, since the default for all rules is zero, I believe (that is, when any rule doesn't exist for any class in the CSS file, Calibre and eReaders will assume the value is zero). Any tests that you performed were meaningless, due to the zero default for all rules. The only way to test this is to do a Check Book to see if Calibre finds an error when adding "em" after a zero.

And, by the way, using 0em for any rule has nothing to do with multiplying 0 by anything, so I have no idea why you would mention that, since it wouldn't apply in this discussion.

[deback]

Originally Posted by JSWolf

I've just done a test and your CSS code isn't going to work. I tried your article CSS code and it was a big failure with ADE 2.0.1. That means that you cannot use it because it's not backwards compatible. You have to test your code to see if it is backwards compatible. ADE 2.0.1 is the benchmark for backwards comparability. This is why I don't do things like that. I know my code is compatible.

You have to blame the companies who use RMSDK but have not kept it updated for your code failure.

The following line caused an error in Check Book:

margin: 0 1m 0 0.25em;

Should be:

margin: 0 1em 0 0.25em;

[deback]

Originally Posted by thiago.eec

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

Okay, well, why does Calibre's Check Book display an error when "px" is missing from the width and height of an image class? I've had this type of error many times in the past.

Example of a class that would result in an error, per Check Book:

.image {
height: 300;
width: 400;
}

[hobnail]

Originally Posted by deback

Okay, well, why does Calibre's Check Book display an error when "px" is missing from the width and height of an image class? I've had this type of error many times in the past.

Example of a class that would result in an error, per Check Book:

.image {
height: 300;
width: 400;
}

Basic arithmetic? 400 and 300 do not equal 0. What the rest of us are talking about is the value 0, not the digit 0.

[thiago.eec]

Originally Posted by deback

Okay, well, why does Calibre's Check Book display an error when "px" is missing from the width and height of an image class? I've had this type of error many times in the past.

Example of a class that would result in an error, per Check Book:

.image {
height: 300;
width: 400;
}

Read again and you might see your mistake:

After a zero length, the unit identifier is optional.

[hobnail]

Originally Posted by thiago.eec

Look at the screenshot. I have drop caps, indentation, ruler, headers, and just a single class for an specific case.

I use a similar style for my chapter headings.

I got this idea of using a span from Turtle91 or DNSB.
If the chapter title is a single line, just the number, or just the title, it looks like this

<h2 title="Chapter One">One</h2>

The title= stuff isn't in what I did; that's added by a saved search and replace in Sigil. Search:

<h([\d])>(.*)</h[\d]>

Replace:

<h\1 title="Chapter \2">\2</h\1>

Being fussy, anal, or whatever, I feel like the word Chapter in the chapter's title is unnecessary; it's bold and centered so yeah, it's the start of a new chapter. But just the number looks rather barren to me in the table of contents so the title= adds the word Chapter to the TOC.

If there's a chapter number and a chapter title then it's:

<h2  title="Chapter Three — A proposed expedition">Three <span>A  proposed expedition</span></h2>

Here again the title= is done with another search and replace; search:

<h([\d])>(.*)  <span>(.*)</span></h[\d]>

Replace:

<h\1  title="Chapter \2 — \3">\2  <span>\3</span></h\1>

In my main css file, stylesheet.css I have

h1, h2, h3, h4 {
     break-inside: avoid;
    break-after: avoid;
    font-weight: bold;
    hyphens: none;
    margin-bottom: 0em;
    margin-top: 1em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-indent: 0em;
}

h2 span, h3 span {
     display: block;
    font-size: larger;
    font-style: italic;
    /* overrides small-caps in 2nd .css file */
    font-variant: normal;
    font-weight: bold;
    margin-top: 1.25em;
}

Then I have another css file, stylesheetdoubleheader.css, which contains

h1, h2, h3, h4 {
    font-variant: small-caps;
    font-weight: normal;
    margin-bottom: 2em;
  }

The stylesheetdoubleheader.css file is only added to all of the chapter files when there is a subhead. (The "h2 span, h3 span" has higher precedence which is why it overrides.)

The display:block is the trick that puts it on a separate line.

[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.

Originally Posted by deback

Any tests that you performed were meaningless, due to the zero default for all rules.

Well, first you said to be sure that if the "em" was included it wouldn't work. Now you say that testing it is meaningless because you knew it would work (since zero is default, according to you)?

Looks like a paradox to me... Or maybe some difficult to admit you were wrong.

P.S.: CSS properties do not default to zero. They default to their initial value, which varies according to the property. See: https://www.w3.org/TR/css-cascade-4/#defaulting

[hobnail]

Addendum to my long-winded response above. On an entirely personal preference I think that using the text word for a chapter number is more "friendly" or something compared to using the digit; in other words One is better than 1. Using One also works better when axing the word Chapter. Sigil has a chapter title plugin that does this for me.

And back when I was a worker bee in IT I had a more experienced coworker repeat the saying that numbers (digits; data type integer) should only be used in software when they're being used for arithmetic. In databases you'd often see the primary key being digits when better would have been some random string, e.g. a UUID.

[deback]

Originally Posted by thiago.eec

Well, first you said to be sure that if the "em" was included it wouldn't work. Now you say that testing it is meaningless because you knew it would work (since zero is default, according to you)?

Looks like a paradox to me... Or maybe some difficult [sic] to admit you were wrong.

P.S.: CSS properties do not default to zero. They default to their initial value, which varies according to the property. See: https://www.w3.org/TR/css-cascade-4/#defaulting

Yes, I was wrong about the "em," and I explained why I thought it shouldn't be included.

When I referred to "default," I meant, for example, if the rule "text-indent: 0;" is not included in a class, then the default for the text-indent for that class is zero. It's the same with margins and many other rules, when they aren't included in a class. Does that make more sense to you now?

[hobnail]

Originally Posted by deback

When I referred to "default," I meant, for example, if the rule "text-indent: 0;" is not included in a class, then the default for the text-indent for that class is zero. It's the same with margins and many other rules, when they aren't included in a class.

But as thiago.eec pointed out they're often inheriting a value from somewhere above. Ereaders and ereader software typically have some built in css that you may not be aware of; for example, a space between paragraphs (margin-top perhaps). So just deleting the css that you think is unneeded may not work; if you want it to be zero you may need to set it to zero.