Chapter formatting

[Hitch]

Originally Posted by pedrovic

Hello, thank you all for the comments.
I meant that, from the little I understand, it is not good practice to put a <h3> before a <h1>, for hierarchical reasons. So I was in doubt about this because, in some printed books, it is common to have a smaller chapter number preceded by its title, according to the example I posted. And I suggested switching <h3> to <h1> to have more subtitle options in the text body, you know?

Best,
Pedrovic

Well, heading styles aren't meant to be used for styling--size, bold, etc. They are, as you say, hierarchal. So, if you want something to look a certain way, use paragraph styles. If you're asking if you should use h1 and h3, or whatever, for a chapter NUMBER and a chapter TITLE, I would say no. There are threads around here, somewhere (where's Ruben?) about formatting that very thing.

Hitch

[theducks]

Originally Posted by patrik

This is something I have been thinking about lately (and I have done in with two separate h# but wondering what best practice is), thank you pedrovic for asking and all you others for great responses!

If you do it like DNSB describes, how do you adjust the space between the two lines (besides putting multiple <br/>s)? (line-height could be used if the two lines are short enough to never use multiple lines on the device)

Also, what is the usuability to have the cover as a heading? I use headers as a way to get a toc, and for me, the cover shouldn't be there. What am I missing?

adding line-height on the block (H#) level spaces them apart (1.2 is normal, 2 is close to a BR BR that might otherwise get sucked up by the renderer )
Other things you can use to decorate. border (top, bottom) lines, padding spaces the lines out from the text box (block). Playing with the Box model is the key A single H tag is a box for you to decorate

[patrik]

Thanks, yes I played with line-height, but it also changed the space between the second line (when it was spread over two lines on the device.)

But your suggestion about block did the trick!

h3 { line-height:4em; }
.line2 { display:block; line-height:1em; }

Seems to give the flexibility I wanted.

[RbnJrg]

Originally Posted by Hitch

Well, heading styles aren't meant to be used for styling--size, bold, etc. They are, as you say, hierarchal. So, if you want something to look a certain way, use paragraph styles. If you're asking if you should use h1 and h3, or whatever, for a chapter NUMBER and a chapter TITLE, I would say no.

Quite right! I use <h*> tags for hierarchal reasons. And not few times I used even tables for chapter titles (when I wanted some FX ). In those cases, I used something like:

<h2 class="hidden" title="My Title Chapter here"></h2>
<table>
...
</table>

and in the .css file:

.hidden {
    display: none;
}

So the hierarchy is maintained for the TOC, and for the chapter numbers and for the chapter text I used something else.

[elibrarian]

I've no intention of starting a long and esoteric discussion, but reading the latest posts here I can't help thinking, that we're inventing obstacles where none are to be found.

I can't find anywhere any indication whatsoever that it should be "bad" to style <Hx>-elements with css or having to hide them. But I can find tons of examples of what to do with them in css …

And I know, that an empty Hx tag would be real bad for search engine optimization, if it occured on a "real" webpage. In an epub, it will pass epubcheck, but ACE will generate an error "Element does not have text that is visible to screen readers …"

Just my 2 ¢ thoughts …

Regards,

Kim
Kim

[RbnJrg]

Originally Posted by elibrarian

I can't find anywhere any indication whatsoever that it should be "bad" to style <Hx>-elements with css or having to hide them. But I can find tons of examples of what to do with them in css …

Please, tell me how to style a chapter title (in the center) with an image to the left and and an image on the right and with a border on top (from margin to margin). All always in the same line and in perfect alineation no matter the font size choosen by the reader. Try coding that with <h*> tags and floating the images and you'll discover interesting things. Not always to employ <h*> tags for titles is the best, more over if we take in count the economy of coding. All depend on the circunstances; sometimes using <h*> tags will be good and convinient and sometimes not. To use <h*> tags is not good nor bad, is the work you are doing what will determine what is better to employ.

[JSWolf]

Originally Posted by patrik

Thanks, yes I played with line-height, but it also changed the space between the second line (when it was spread over two lines on the device.)

But your suggestion about block did the trick!

h3 { line-height:4em; }
.line2 { display:block; line-height:1em; }

Seems to give the flexibility I wanted.

Do not use line-height for anything. You do not need it and it's best to use the default line height. It's best to be as minimal as you can with the CSS and line-hight is one thing that doesn't need to be there. Also, display: block does nothing so it can go. Use top and bottom margins like this...

h3 {
  margin-top: 1em;
  margin-bottom: 1.5em;
  text-align: center;
}
.line2 {
  font-weight: bold;
  text-align: center;
}

The only think you need to add to that CSS code is font-size if you want specific font sizes. Oh and the way your CSS is written is not as easy to read as the way I've written it.

[elibrarian]

Originally Posted by RbnJrg

Please, tell me how to style a chapter title (in the center) with an image to the left and and an image on the right and with a border on top (from margin to margin). All always in the same line and in perfect alineation no matter the font size choosen by the reader. Try coding that with <h*> tags and floating the images and you'll discover interesting things.

Oh, I couldn't, and I do not say that there could not be situations, where it would be better/easier to hide the Hx (but still not leaving it empty). What I oppose against is the impression one could get from the above posts, that this should be the rule and not the exception.

Regards,

Kim

[Hitch]

Originally Posted by elibrarian

I've no intention of starting a long and esoteric discussion, but reading the latest posts here I can't help thinking, that we're inventing obstacles where none are to be found.

I can't find anywhere any indication whatsoever that it should be "bad" to style <Hx>-elements with css or having to hide them. But I can find tons of examples of what to do with them in css …

And I know, that an empty Hx tag would be real bad for search engine optimization, if it occured on a "real" webpage. In an epub, it will pass epubcheck, but ACE will generate an error "Element does not have text that is visible to screen readers …"

Just my 2 ¢ thoughts …

Regards,

Kim
Kim

If heading elements in HTML are structural, and meant to be used for that purpose, then, yes, using them merely for styling in a non-structural way would be "bad." We haven't really pierced the semantic web yet, in eReaders, but we are certainly getting there from here, and to screw up the hierarchal layout, just to avoid using proper css with paragraph styles, etc., seems...contraindicated.

Offered FWIW.

Hitch

[RbnJrg]

Originally Posted by elibrarian

Oh, I couldn't, and I do not say that there could not be situations, where it would be better/easier to hide the Hx (but still not leaving it empty). What I oppose against is the impression one could get from the above posts, that this should be the rule and not the exception.

Ok, I can agree with that. And when the <h*> are hidden, you can write whatever inside them if you want since won't be displayed anyway

[Turtle91]

Originally Posted by JSWolf

Do not use line-height for anything. You do not need it and it's best to use the default line height. It's best to be as minimal as you can with the CSS and line-hight is one thing that doesn't need to be there. Also, display: block does nothing so it can go. Use top and bottom margins like this...

h3 {
  margin-top: 1em;
  margin-bottom: 1.5em;
  text-align: center;
}
.line2 {
  font-weight: bold;
  text-align: center;
}

The only think you need to add to that CSS code is font-size if you want specific font sizes. Oh and the way your CSS is written is not as easy to read as the way I've written it.

display: block actually has quite a useful purpose if used correctly. Be careful when you say things like that...maybe clarify with: "When using two different block level tags, display:block is redundant."

My example uses 'display: block' correctly in a minimalist fashion and achieves the OP's request quite well (it is even in pretty CSS just for you!):

<h3>Chapter 1 <span>The Ending of the Beginning</span></h3>

/* (however you want to style it:) */
h3 {
	font-size: .75em;
	margin: 2em 0;
	text-align: center;
	font-weight: bold;
        font-family: sans-serif
    }

h3 span {
	display: block;
        font-size: 2em;
        margin-top: 1em;
        font-weight: normal;
        font-family: serif;
        font-variant: small-caps
   }

Of course there are multiple ways to achieve the results and mine is just one example.

[DNSB]

Originally Posted by Turtle91

Of course there are multiple ways to achieve the results and mine is just one example.

What? No religious arguments about the "ONE TRUE WAY"?

I have to admit that I like studying other people choices in styling an ebook. There's always the chance of finding a nugget of code which I can file the serial numbers off of and incorporate into my personal stylesheet collection.

[Hitch]

Originally Posted by DNSB

What? No religious arguments about the "ONE TRUE WAY"?

I have to admit that I like studying other people choices in styling an ebook. There's always the chance of finding a nugget of code which I can file the serial numbers off of and incorporate into my personal stylesheet collection.

Ohhhhh, I knew I felt someone rummaging around in my skivvies!!! :-)



Hitch

[patrik]

Originally Posted by JSWolf

Do not use line-height for anything. You do not need it and it's best to use the default line height. It's best to be as minimal as you can with the CSS and line-hight is one thing that doesn't need to be there. Also, display: block does nothing so it can go. Use top and bottom margins like this...

h3 {
  margin-top: 1em;
  margin-bottom: 1.5em;
  text-align: center;
}
.line2 {
  font-weight: bold;
  text-align: center;
}

It's very useful to actually read the earlier posts to understand what the wished outcome is. (Your example does not give that.)

How about you read the posts, and then make an example, without line-height or display:block which gives that outcome.

Can you do that?

[Turtle91]

Originally Posted by patrik

It's very useful to actually read the earlier posts to understand what the wished outcome is. (Your example does not give that.)

How about you read the posts, and then make an example, without line-height or display:block which gives that outcome.

Can you do that?

Actually the CSS example he uses will achieve what was asked, he just did not include the html code:

<h3>Chapter 1</h3>
<p class="line2">The Ending of the Beginning</p>

The reason I don't like that approach is it is not minimalist, and causes issues with the auto TOC functions. You would need to add the following title attribute:

<h3 title="Chapter 1 The Ending of the Beginning">Chapter 1</h3>
<p class="line2">The Ending of the Beginning</p>

My example does that all in one, minimalist, fell swoop...and it makes it much easier for a human to read the code:

<h3>Chapter 1 <span>The Ending of the Beginning</span></h3>