At the risk of woefully exposing my limited css knowledge, I believe the following to be true:
With nested html elements, the various css attributes are not all treated the same.
- The font-size attribute is multiplicative, at least when using em units.
Therefore, in your example, I would expect the text 'KARMIC KILTER' to render at 1.2 x 0.8em, i.e 0.96em.
Similarly, I would expect the text '16' to render at 1.2 x 0.8 x 1.2em, i.e. 1.152em
- I believe nested margins are additive not multiplicative.
- Nested attributes like color, font-family are neither.
Using your example, if .calibre11 had color: red and .calibre15 has color: #BDBDBD
'KARMIC KILTER' would be in red, '16' would be in #BDBDBD (some shade of grey).
Quote:
|
do strong and font-weight: bold both do the same thing?
|
They appear to to the same thing on an ereader but whether they necessarily do in a web browser, I don't know.
<strong> and <b> seem to do the same thing.
Quote:
|
how much of that code could be deleted with no side effects
|
In your example I don't think <span class="calibre14"> is doing anything useful. I think line-height only works on block elements e.g. <body>, <h?>, <p>, <div>, <blockquote>.
<span>, <i>, <em>, <b>, <strong> are inline elements, i.e. they work on a selected portion of a block element.
Time to read up on html and css, I think, cybmole
It will help a lot. You might find
this site useful, it lets you play around typing in sample html/css and immediately viewing the results.
Re: the Regex, I'll leave that for someone else