Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 04-06-2014, 01:30 PM   #1
JLius
Connoisseur
JLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-books
 
Posts: 63
Karma: 890
Join Date: Mar 2014
Location: Belgium
Device: sony PRS T-1
font-size headings

Dear all

In the CSS of my epubs, I didn't set font-size for headings (h1,h2,h3). When h1 was too big for the chapter heading, I just used h2.
Is this good practice? Or should I always set a font-size for the headings in my css?

Is what is written here (http://www.w3.org/TR/CSS2/sample.html) the default size for headings? So if you dont set them in CSS, this is the size they get?

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }

JLius
JLius is offline   Reply With Quote
Old 04-06-2014, 02:41 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,795
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
Quote:
Originally Posted by JLius View Post
In the CSS of my epubs, I didn't set font-size for headings (h1,h2,h3). When h1 was too big for the chapter heading, I just used h2.
Is this good practice? Or should I always set a font-size for the headings in my css?
You should never choose your tags based on how they look, but on what they mean (except for working around bugs and limitations, maybe), and then alter the looks with CSS.

That said, there's a bit of leeway in what <h1> means. Is it for the book title? For parts, even if there are no parts?... Personally, I often use <h1> for chapters, and if there are parts, I use <h1 class="part"> or something like that.

Quote:
Is what is written here (http://www.w3.org/TR/CSS2/sample.html) the default size for headings? So if you dont set them in CSS, this is the size they get?
The default depends on the application (and sometimes even user settings), so no, those are at the most common defaults, but you shouldn't rely on them.
Jellby is online now   Reply With Quote
 
Enthusiast
Old 04-06-2014, 03:26 PM   #3
JLius
Connoisseur
JLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-books
 
Posts: 63
Karma: 890
Join Date: Mar 2014
Location: Belgium
Device: sony PRS T-1
I use h1 for chapter titles, sometims h2 when h1 is too big, and h2 or h3 for subtitles.

Quote:
Originally Posted by Jellby View Post

The default depends on the application (and sometimes even user settings), so no, those are at the most common defaults, but you shouldn't rely on them.
So you're saying I should always set a font-size in css for h1,h2,h3?
JLius is offline   Reply With Quote
Old 04-06-2014, 03:44 PM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,795
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
Quote:
Originally Posted by JLius View Post
I use h1 for chapter titles, sometims h2 when h1 is too big, and h2 or h3 for subtitles.
That's fine, if with "subtitles" you mean sections inside chapters. If they are real subtitles (a kind of extension to the title), they are better included inside the <h*>, and you can style them, of course:

Code:
<h1>Chapter One: The Beginning
<span class="subtitle">How everything started</span></h1>
Quote:
So you're saying I should always set a font-size in css for h1,h2,h3?
Only if the particular size is important to you. You can probably rely on <h1> being larger than <h2>, and both larger than the normal text, but if you want the sizes in some definite proportion or whatever, you better define it.
Jellby is online now   Reply With Quote
Old 04-06-2014, 05:35 PM   #5
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 13,609
Karma: 5126946
Join Date: Aug 2009
Location: The (original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by JLius View Post
Dear all

In the CSS of my epubs, I didn't set font-size for headings (h1,h2,h3). When h1 was too big for the chapter heading, I just used h2.
Is this good practice? Or should I always set a font-size for the headings in my css?

Is what is written here (http://www.w3.org/TR/CSS2/sample.html) the default size for headings? So if you dont set them in CSS, this is the size they get?

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }

JLius
Right!
And the 500lb e-book Gorillas follow those

If you want a value. SET IT (and hop the Gorillas allow you to play that much)

to Jelby's advice

Use headings for Hierarchy , not size
theducks is offline   Reply With Quote
Old 04-07-2014, 12:03 AM   #6
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 248
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by theducks View Post
Right!
And the 500lb e-book Gorillas follow those
Exactly. Or, to be slightly more cynical...

What? You really think any of the EPUB reader vendors have actually read the CSS specification?
dgatwood is offline   Reply With Quote
Old 04-07-2014, 04:36 AM   #7
JLius
Connoisseur
JLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-books
 
Posts: 63
Karma: 890
Join Date: Mar 2014
Location: Belgium
Device: sony PRS T-1
Allright, thanks all (especially Jellby)!
JLius is offline   Reply With Quote
Old 04-07-2014, 04:49 AM   #8
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,744
Karma: 2117255
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
A bit late, but ok. If you have to make a choice between semantics or layout, always go for semantics. If labelled correctly, you can easily apply the layout you want. The other way round is not possible...

I personally use H1 for Book title, H2 for chapters and H3 for sections/sub-chapters/etc. Sometimes in an anthology I use H2 for the writer and H3 for the story title. If a story has multiple chapters, it would be H4.
Since I use this consistently, for me it is always very clear what it what.
Toxaris is offline   Reply With Quote
Old 04-07-2014, 05:24 AM   #9
JLius
Connoisseur
JLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-books
 
Posts: 63
Karma: 890
Join Date: Mar 2014
Location: Belgium
Device: sony PRS T-1
For book title(page) I gave up tinkering with code, the result was never ideal (dependent on font-size etc). I chose to use a jpg as titlepage instead, that way title, author, publisher... are always positioned the same way.
JLius is offline   Reply With Quote
Old 04-07-2014, 07:05 AM   #10
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,712
Karma: 1356799
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
This is one case where descriptive alt text would be most useful.
mrmikel is offline   Reply With Quote
Old 04-07-2014, 09:33 AM   #11
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,744
Karma: 2117255
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Quote:
Originally Posted by JLius View Post
For book title(page) I gave up tinkering with code, the result was never ideal (dependent on font-size etc). I chose to use a jpg as titlepage instead, that way title, author, publisher... are always positioned the same way.
Oh, I agree. I usually use an optimized png for the titlepage since it is usually black and white anyway. Much smaller.
Toxaris is offline   Reply With Quote
Old 04-07-2014, 01:20 PM   #12
JLius
Connoisseur
JLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-booksJLius has learned how to read e-books
 
Posts: 63
Karma: 890
Join Date: Mar 2014
Location: Belgium
Device: sony PRS T-1
Quote:
Originally Posted by Jellby View Post
That's fine, if with "subtitles" you mean sections inside chapters. If they are real subtitles (a kind of extension to the title), they are better included inside the <h*>, and you can style them, of course:

Code:
<h1>Chapter One: The Beginning
<span class="subtitle">How everything started</span></h1>
Okay, I've been trying this span class for the subtitle, but it isn't going as planned.

Situation before:
Code:
h1 {
  text-align: center;
  padding-bottom: 20px;
  padding-top: 10px;
  }
h2 {
  text-align: center;
  padding-bottom: 70px;
  padding-top: 10px;
  }
h3 {
  text-align: center;
  padding-bottom: 1.5em;
  padding-top: 1.5em;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  }
It's fine to eliminate h2 and replace it with a span inside h1 (font-size is not really an isue here).

So now I try this:
Code:
.subtitle {
padding-bottom: 70px;
  padding-top: 30px;
}
and use this for the span class.

But the result doesn't look anything like the initial h1 h2, which are separated by sufficient padding. The extension to the title chapter number appears on the same line. I don't want to add a </br>, that doesn't feel right. But even when I do, the padding-top doesn't work, even when I set it to 100px.
What am I doing wrong?


The h3 is for real subtitles, so I think I can leave that the way it is?
JLius is offline   Reply With Quote
Old 04-07-2014, 04:06 PM   #13
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,795
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
How about:

Code:
.subtitle { display: block}
which is in practice equivalent to using <div class="subtitle"> (also a valid option)?

<span> is by default an inline element, <div> is by default a block element, both with no other semantic content. I don't remember the details, but it may be that inline elements do not have any padding, or at least vertical padding.
Jellby is online now   Reply With Quote
Old 04-07-2014, 04:09 PM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,795
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
Quote:
Originally Posted by JLius View Post
The h3 is for real subtitles, so I think I can leave that the way it is?
Do you mean real sections? Then yes, but move it to <h2> if you are note using anything between <h1> and <h3>.
Jellby is online now   Reply With Quote
Old 04-07-2014, 05:34 PM   #15
RbnJrg
Addict
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 375
Karma: 255494
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JLius View Post
For book title(page) I gave up tinkering with code, the result was never ideal (dependent on font-size etc). I chose to use a jpg as titlepage instead, that way title, author, publisher... are always positioned the same way.
In that case, why not a svg image?
RbnJrg is offline   Reply With Quote
Reply

Tags
css, epub, font-size, headings

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem changing font size using font size key Waylander Conversion 0 10-02-2013 03:30 PM
Determine font and font size on incoming epub? peaceridge Calibre 4 01-30-2012 03:35 PM
PRS-300 Med font size too big, but small font size too small eli2k Sony Reader 4 05-28-2010 09:47 AM
Different font for headings bremler ePub 4 03-11-2010 06:03 AM


All times are GMT -4. The time now is 08:34 AM.


MobileRead.com is a privately owned, operated and funded community.