View Full Version : I made a discovery, but should I use it?


travger
04-14-2013, 03:59 PM
I found that an element can have more than one class.

Like, when all paragraphs are indented and I want to remove indent from first paragraph then it's enough to add "first" to the existing p class
<p class="calibre1 first">
and
.first {text-indent:0}
to the css.

Result looks the same if I copy the normal paragraph class, change text-indent to 0 (and it's name) and then change p class in every first paragraph to the new name.

Or if I want one p to be exactly like others, only little bit smaller. Why should I create new class with only one difference from previous?

But is it safe to use, can most/all readers cope with it? If yes, then why is it so seldom used? Or is there some other reason why I see (mostly) that every h or p has only one class; maybe it won't convert well?

Turtle91
04-15-2013, 01:07 AM
I occasionally use multiple classes like this and have not had any problems....however, my testing has been a little limited. Marvin, epubreader, a little kindle and ade to name a couple.

I would recommend NOT using conflicting classes though - indent and non-indent - that seems to be asking for issues not to mention slightly bloating the code. I would use classes with different functionality.
For example:
.ctr {text-align:center}
.spacer {margin-top:2em; margin-bottom:2em}

<p class="ctr spacer">


Granted, both of those could be defined in a single class, but it is just an example of not having conflicting styling.

Cheers!

Toxaris
04-15-2013, 03:04 AM
You can and 'should' use it. It would minimize the number of classes in a stylesheet. Remember that it is cascading. The second class you will use, will add to the first one. Or at least it should according to the specs. That also means, that if there are conflicting settings, the second one would be the one used.

Example:
.initial {text-indent: 0; font-weight: bold;}
.second {font-weight: normal;}

If you now would assign it to a tag, e.g.<p class="initial second">, the text would not have an indent and normal font-weight. Of course this is just an example...

I do recommend always to check the result, since the cascading factor can sometimes surprise you.

travger
04-15-2013, 04:15 AM
Thank you for the responses.

I do check in Sigil. If I ever read that epub outside Calibre and find surprises, I can open it up again.

Bloating the code is good point, I'll keep it in mind.

Mostly I feel the urge just to add a class when the stylesheet is too long anyway or I want some specific paragraph to look little different.

Toxaris
04-15-2013, 05:19 AM
Especially in the last case you describe is one of the use cases for me at least.

HarryT
04-15-2013, 07:26 AM
Absolutely - that's exactly the way to do it. That's why they're called cascading style sheets, because each new style modifies the previous ones. If you have a "paragraph" style, which indents paragraphs, and you want a style for "initial paragraph" with no indent, simply specify the lack of indentation as a modification to the normal paragraph style; don't duplicate the entire style.

pdurrant
04-15-2013, 07:39 AM
Absolutely - that's exactly the way to do it. That's why they're called cascading style sheets, because each new style modifies the previous ones. If you have a "paragraph" style, which indents paragraphs, and you want a style for "initial paragraph" with no indent, simply specify the lack of indentation as a modification to the normal paragraph style; don't duplicate the entire style.

This is slightly different from the use of two style sheets on the same element. The cascading bit means that an element inherits all applicable styles, with the specific overriding the generic.

So a paragraph <p class="first"> inherits any style set on body, any enclosing div or other block, the generic paragraph style definition and only then the class "first".

exaltedwombat
04-15-2013, 07:41 AM
What about

h1 + p {text-indent:0;}

in the stylesheet?
Does this method of cancelling the indent of a first paragraph (i.e. one following a chapter heading using <h1>) cause problems in any standard reader?

Toxaris
04-15-2013, 07:56 AM
None in the ones I know. I actually use that.

Turtle91
04-15-2013, 09:49 AM
What about

h1 + p {text-indent:0;}

in the stylesheet?
Does this method of cancelling the indent of a first paragraph (i.e. one following a chapter heading using <h1>) cause problems in any standard reader?

+1 Toxaris

I use it all the time. There are very few paragraphs that need a special class when you use techniques like this - that's a good thing!

I use multiple's like this:
p.ChDiv + p, blockquote + p, h2 + p, div.bannerlist + p, img + p, table + p {text-indent:0}

Turtle91
04-15-2013, 09:59 AM
I also combine that with pseudo elements to style first paragraphs in the chapter.

h2 + p {text-indent:0; font-size:1em; line-height:1em}
h2 + p:first-letter {font-family:"Monotype Corsiva", "cursive"; font-size:3em; font-weight:bold; font-style:italic;float:left;margin-right:.1em; margin-bottom:.2em}
h2 + p:first-line {font-variant:small-caps; font-size:1.15em}

<h2>Chapter One</h2>
<p>This is first paragraph text.</p>

That gives a nice drop cap for the first letter and the first line (no matter what the width of the display) is in small caps.

I use that on my personal books because the reading app I use is mostly spec compliant...so it displays properly. Some non-compliant software, such as ADE, don't support pseudo elements, but they degrade gracefully. If you are making a commercial book then you would need to use workarounds to get the same effect.

Cheers,

pdurrant
04-15-2013, 10:02 AM
It's annoying that ADE doesn't support pseudo elements, since it's part of the ePub 2.0 spec, re-confirmed in the 3.0 spec.

JSWolf
04-15-2013, 01:07 PM
This is slightly different from the use of two style sheets on the same element. The cascading bit means that an element inherits all applicable styles, with the specific overriding the generic.

So a paragraph <p class="first"> inherits any style set on body, any enclosing div or other block, the generic paragraph style definition and only then the class "first".

If goes body, p, first in that order.

I set p to what most p will be so I can get rid of things like <p class="para">. makes the code look that bit neater and the ePub smaller.

travger
04-15-2013, 02:29 PM
I must remember that h+p trick. I actually knew it, but somehow never think about it when I should. Mostly I'm fixing something already formatted and it seems easier to slip in another class.

I'm afraid to use Replace All on those p class="calibre1" kind of paragraphs. Logic says that it should be safe, but I still can't feel sure there is not anything hidden. Maybe when I have few years of experience ... or like some book very-very much. Now it takes me whole day to check all the classes and figure out what they do.

theducks
04-15-2013, 09:09 PM
I must remember that h+p trick. I actually knew it, but somehow never think about it when I should. Mostly I'm fixing something already formatted and it seems easier to slip in another class.

I'm afraid to use Replace All on those p class="calibre1" kind of paragraphs. Logic says that it should be safe, but I still can't feel sure there is not anything hidden. Maybe when I have few years of experience ... or like some book very-very much. Now it takes me whole day to check all the classes and figure out what they do.

Replace the whole tag (<p class="calibre1">) with <p> to be safe and avoid any other usage combinations.

Tex2002ans
04-15-2013, 09:34 PM
Now it takes me whole day to check all the classes and figure out what they do.

In Sigil's Code View, if you right click a class and click "Go To Link or Style" it will jump you right into the CSS where that class is located. This really speeds things up when trying to figure out what class is doing what (especially with Calibre's "calibre01", "calibre02", "calibre03" classes.)

travger
04-15-2013, 11:22 PM
In Sigil's Code View, if you right click a class and click "Go To Link or Style" it will jump you right into the CSS where that class is located. This really speeds things up when trying to figure out what class is doing what (especially with Calibre's "calibre01", "calibre02", "calibre03" classes.)

In that end I have no problems, it's mostly "do I need 'calibre32' or 'calibre55' and where are they?". Report shows the file and I can search for the classes but usually it's too much clicking and copypasting to bother.

Though I must really start using Replace All more often and get accustomed that it only feels out of control.

theducks
04-15-2013, 11:33 PM
In that end I have no problems, it's mostly "do I need 'calibre32' or 'calibre55' and where are they?". Report shows the file and I can search for the classes but usually it's too much clicking and copypasting to bother.

Though I must really start using Replace All more often and get accustomed that it only feels out of control.

The report also show 1st discovered (file) usage, makes it easy to check out usage context in many cases.
It is those crazy use of spans everywhere :rolleyes: that drive me :mad:

Toxaris
04-16-2013, 02:17 AM
Look at the stylesheet and check out the differences between the styles. If the difference is minor (font-size: 0.993 instead of font-size: 0.995), delete the styles. Usually you can cope between 5-15 styles and that includes seperate styles for italic, bold and so on.

travger
04-16-2013, 08:52 AM
The report also show 1st discovered (file) usage, makes it easy to check out usage context in many cases.
It is those crazy use of spans everywhere :rolleyes: that drive me :mad:

I hear you! Right now I have a book where the only p-s are in headings :eek: Every paragraph is between spans AND divs.

It still looks very nice, but I'm curious how much smaller the file will be, so I think it's perfect to experiment on with Replace All.

Turtle91
04-16-2013, 11:50 AM
Absolutely - that's exactly the way to do it. That's why they're called cascading style sheets, because each new style modifies the previous ones. If you have a "paragraph" style, which indents paragraphs, and you want a style for "initial paragraph" with no indent, simply specify the lack of indentation as a modification to the normal paragraph style; don't duplicate the entire style.

I was just testing this in Sigil...I don't know if it's a QT bug or not but it didn't seem to work as expected. I had the following CSS/HTML:

div.fluff p {text-align:justify; font-style:italic}
p.att {text-align:right; font-style:normal}

<div class="fluff">
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p class="att">Should be normal and right aligned</p>

<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p class="att">Should be normal and right aligned</p>
</div>

Neither the right align of the font style normal were applied in the "att" class unless I used the !important tag in the "att" declaration.

Anyone seen this before?

pdurrant
04-16-2013, 12:16 PM
I was just testing this in Sigil...I don't know if it's a QT bug or not but it didn't seem to work as expected. I had the following CSS/HTML:

div.fluff p {text-align:justify; font-style:italic}
p.att {text-align:right; font-style:normal}

<div class="fluff">
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p class="att">Should be normal and right aligned</p>

<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p class="att">Should be normal and right aligned</p>
</div>

Neither the right align of the font style normal were applied in the "att" class unless I used the !important tag in the "att" declaration.

Anyone seen this before?

I'm not sure why that's doing that, but I'd suggest changing
div.fluff p {text-align:justify; font-style:italic}
to
div.fluff {text-align:justify; font-style:italic}

there's no need to specify the p they inherit from the div anyway.

pdurrant
04-16-2013, 12:26 PM
I was just testing this in Sigil...I don't know if it's a QT bug or not but it didn't seem to work as expected. I had the following CSS/HTML:

div.fluff p {text-align:justify; font-style:italic}
p.att {text-align:right; font-style:normal}

<div class="fluff">
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p class="att">Should be normal and right aligned</p>

<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p>Stuff, stuff, and more stuff.</p>
<p class="att">Should be normal and right aligned</p>
</div>

Neither the right align of the font style normal were applied in the "att" class unless I used the !important tag in the "att" declaration.

Anyone seen this before?

Aha! I have it. Your problem is the selector specificity. See 6.4.3 here (http://www.w3.org/TR/CSS2/cascade.html):

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)


for both, a=0 and b=0

but for div.fluff p, c=1 d=3
for p.att, c=1, d=2

so div.fluff p overrides p.att, unless you make it important (which you should probably not do.)

Turtle91
04-16-2013, 03:02 PM
wow! I didn't realize specificity went into such detail...I thought an inline class would take priority (like an inline style) over a parent style.

Thanks for the edumacation!

pdurrant
04-16-2013, 04:14 PM
wow! I didn't realize specificity went into such detail...I thought an inline class would take priority (like an inline style) over a parent style.

Thanks for the edumacation!

I didn't know either, until I looked it up. It does seem an odd way to define the priority of styles, but that's the way it's done.