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-30-2019, 07:42 PM   #1
pedrovic
Junior Member
pedrovic began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Apr 2019
Location: Brazil
Device: Kindle Paperwhite
Chapter formatting

Hi, group, how are you? I am a graphic designer who is migrating to the "literary" mobile world. I have read a lot about html and css for epub and mobi, but I have a question that I still can not solve: When a chapter page has two elements: chapter number and, below, the chapter title, which hierarchy of headings ? I could start with a <h3> for the chapter number and then insert a <h1> in the title? the goal is to leave this larger than the first.Something like that:

Chapter 1
The life of Brian

This is my first post, and I could not find this question here, so if it already exists, I apologize for repeating a post.

Thank you all!
pedrovic is offline   Reply With Quote
Old 05-01-2019, 12:38 AM   #2
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 5,974
Karma: 26991853
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Aura One, Aura H2O, Aura HD, Nexus 7 HD, iPad Air, Tolino epos
Quote:
Originally Posted by pedrovic View Post
Hi, group, how are you? I am a graphic designer who is migrating to the "literary" mobile world. I have read a lot about html and css for epub and mobi, but I have a question that I still can not solve: When a chapter page has two elements: chapter number and, below, the chapter title, which hierarchy of headings ? I could start with a <h3> for the chapter number and then insert a <h1> in the title? the goal is to leave this larger than the first.Something like that:

Chapter 1
The life of Brian

This is my first post, and I could not find this question here, so if it already exists, I apologize for repeating a post.

Thank you all!
I would enclose both elements in the same <h?> tag with a <br /> to break the line and a css class to increase the size of the title.

As a quick and dirty example (the first line is from the text, the two classes are in the stylesheet:

Code:
<h3 class="chapternum">Chapter 1<br/><span class="bigc15">The Ending of the Beginning</span></h3>

.chapternum {
	font-size: 1.5em;
	margin-top: 2em;
	margin-bottom: 1.5em;
	margin-right: 0;
	margin-left: 0;
	page-break-after: avoid;
	text-align: center;
	font-weight: bold;
    }

.bigc15 {
	font-size: 1.5em;
   }
Generally, I prefer to do as much as possible with the stylesheet and avoid in-line styles like the plague. In the code above, the first part of the chapter heading is displayed with 1.5 time the default font size while the subheader is displayed at 2.25x the default font size (1.5x1.5=2.25).

Also note that this is for epub. Mobi should work much the same but oddities will occur.

Last edited by DNSB; 05-01-2019 at 12:40 AM.
DNSB is offline   Reply With Quote
Advert
Old 05-01-2019, 11:57 AM   #3
theducks
Well trained by Cats
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: 23,278
Karma: 24326584
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: K4NT, Galaxy Tab A, Kobo Aura2
I also use DNSB's method.
This has the advantage of being perfect for the TOC (from header) tools
to include both pieces as a single entry (also on a single line)

Forget the old "Use Headers for style"

Use them for TOC indent levels


h3 chapter
h2 part
h1 if you need something as a wrapper.

I leave the books title at the same level as the outer layer used
theducks is offline   Reply With Quote
Old 05-01-2019, 03:29 PM   #4
pedrovic
Junior Member
pedrovic began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Apr 2019
Location: Brazil
Device: Kindle Paperwhite
Thumbs up

Thanks, "DNSB" and "theducks" for the tips.
I tested in Sigil and Kindle Previewer and it's OK.

One mor question: can I change <h3> to <h1> for a better HTML semantics?

Best,
Pedrovic
pedrovic is offline   Reply With Quote
Old 05-01-2019, 05:26 PM   #5
lumpynose
Guru
lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.
 
Posts: 728
Karma: 4418026
Join Date: Jul 2012
Device: eBookMan EBM-900
Does anyone ever use the section tag? I like its semantics, how it contains the chapter (i.e., has an end section tag) rather than having an h tag merely start the chapter. I have no idea what the epub spec says about it.

https://stackoverflow.com/questions/...ection-and-div
lumpynose is online now   Reply With Quote
Advert
Old 05-01-2019, 06:27 PM   #6
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 7,673
Karma: 71909081
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by pedrovic View Post
Thanks, "DNSB" and "theducks" for the tips.
I tested in Sigil and Kindle Previewer and it's OK.

One mor question: can I change <h3> to <h1> for a better HTML semantics?

Best,
Pedrovic
Why do you think those are "better," if I may ask?

Hitch
Hitch is offline   Reply With Quote
Old 05-01-2019, 07:46 PM   #7
theducks
Well trained by Cats
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: 23,278
Karma: 24326584
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: K4NT, Galaxy Tab A, Kobo Aura2
I'm with Hitch. I only use H#'s to aid in using the TOC tool. No other reason.

If you want size, use the CSS (and maybe a Span to raise or lower the size of part of the title)
theducks is offline   Reply With Quote
Old 05-01-2019, 09:22 PM   #8
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 1,781
Karma: 11941128
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
The <h?> tags are more semantically correct when used to define/differentiate what level 'header' you are using. You can style your headers however way you wish, or no way at all. Some devices might apply default styles to a header when that device doesn't use the publisher's css. As mentioned previously, some programs like Sigil and Calibre Editor can auto create TOC based on the header tags.

I use them in a heirarchy like this:
Spoiler:

Code:
<h1> cover </h1>
   <h2>front matter like dedication, synopsis, title page, etc.</h2>
      <h3>Chapters</h3>
      <h3>Graphics, epigraphs, maps, etc.</h3>
   <h2>Appendix Title</h2>
      <h3>Appendix 1</h3>
      <h3>Appendix 2</h3>
      <h3>Appendix 3</h3>
   <h2>back matter like 'about the author', acknowledgements, author notes, etc.</h2>
<h1> back cover (if there is one) </h1>

 - OR - 

<h1> cover </h1>
   <h2>front matter like dedication, synopsis, title page, etc.</h2>
      <h3> Parts, Books, etc</h3>
         <h4>Chapters</h4>
         <h4>Graphics, epigraphs, maps, etc.</h4>
      <h3> Parts, Books, etc</h3>
         <h4>Chapters</h4>
         <h4>Graphics, epigraphs, maps, etc.</h4>
   <h2>Appendix Title</h2>
      <h3>Appendix 1</h3>
      <h3>Appendix 2</h3>
      <h3>Appendix 3</h3>
   <h2>back matter like 'about the author', acknowledgements, author notes, etc.</h2>
<h1> back cover (if there is one) </h1>


I also use css similar to the example provided by DNSB, but mine relies a little more on the rules of CSS to define styling rather than giving everything a class name. This approach is perfectly valid and, IMO, provides a little cleaner html code:

Spoiler:
Code:
<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
   }


I don't particularly use the <section> tag. I haven't needed it - but I haven't really gotten into ePub3 spec. I break up each chapter into its own file so really don't need another tag to say it's a chapter. I do use <div> tags to give special formatting to a section of the file. To me that serves the same purpose.

Spoiler:
Code:
CSS:
p           {text-indent: 1.2em}
div.verse   {margin: 2em}
div.verse p {font-style: italic; font-size:.8em; text-indent:0}
div + p     {text-indent: 0}


HTML:
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>

<div class="verse">
   <p>Line of verse</p>
   <p>Line of verse</p>
   <p>Line of verse</p>
   <p>Line of verse</p>
</div>

<p>normal paragraph after div = no indent</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
Turtle91 is offline   Reply With Quote
Old 05-01-2019, 09:32 PM   #9
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 7,673
Karma: 71909081
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by Turtle91 View Post
The <h?> tags are more semantically correct when used to define/differentiate what level 'header' you are using. You can style your headers however way you wish, or no way at all. Some devices might apply default styles to a header when that device doesn't use the publisher's css. As mentioned previously, some programs like Sigil and Calibre Editor can auto create TOC based on the header tags.

I use them in a heirarchy like this: (snipped)
Yes, as they should be used--to establish document hierarchy. But that's not what I'm taking away from the question. I'm trying to understand what he's really asking.

Hitch
Hitch is offline   Reply With Quote
Old 05-01-2019, 09:40 PM   #10
lumpynose
Guru
lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.
 
Posts: 728
Karma: 4418026
Join Date: Jul 2012
Device: eBookMan EBM-900
Hitch, I think he's currently relying on the built in formatting of the h1 and h3 tags, with h1 being bigger than h3. In his example the smaller text is h3 and precedes the larger h1 text. But now that you've revealed the wizard behind the curtain (CSS) he's asking if he can change that h3 to an h1.
lumpynose is online now   Reply With Quote
Old 05-01-2019, 10:06 PM   #11
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 5,974
Karma: 26991853
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Aura One, Aura H2O, Aura HD, Nexus 7 HD, iPad Air, Tolino epos
Quote:
Originally Posted by pedrovic View Post
Thanks, "DNSB" and "theducks" for the tips.
I tested in Sigil and Kindle Previewer and it's OK.

One more question: can I change <h3> to <h1> for a better HTML semantics?

Best,
Pedrovic
Since I use css classes to control the appearance, my preference is <h1> is used for books in a omnibus/box set, <h2> is used for parts within a book and <h3> is used for chapters. I've occasionally used <h4> for sub-chapters but that's been pretty rare. If I get to the point where I might need <h5> or <h6>, I find myself looking at the book structure instead.

I might ask why using h1 instead of h3 would be better HTML semantics? They should be used for heading levels from h1 to h6. In my case, consistency says a single book would not get a <h1>, a book without parts would not get a <h2>, etc.

Last edited by DNSB; 05-01-2019 at 10:09 PM.
DNSB is offline   Reply With Quote
Old 05-02-2019, 01:25 AM   #12
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 2,067
Karma: 19003704
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
I always use h1 for the book title. Then descend as needed. If it is an omnibus, the individual book titles get to be h2 and their chapters are h3. If it is a standard novel with chapters or a short story collection, those are often assigned as h3 also. I have never gone deeper than h4, and that is seldom, because I only do simple fiction, and that very rarely has sub-chapters.

You can use the hx with a title: tag if you want the name to appear differently in the TOC than it appears on the page, or even set the hx to display:none and then create your displayed heading text(s) with <p>s or <div>s.
GrannyGrump is offline   Reply With Quote
Old 05-02-2019, 02:14 AM   #13
lumpynose
Guru
lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.lumpynose ought to be getting tired of karma fortunes by now.
 
Posts: 728
Karma: 4418026
Join Date: Jul 2012
Device: eBookMan EBM-900
pedrovic, putting it all together/cutting to the chase, I think the way to do it is as DNSB originally outlined, with a br and span inside the h3 tag and using classes to control the appearance/formatting.
lumpynose is online now   Reply With Quote
Old 05-02-2019, 06:54 AM   #14
patrik
Evangelist
patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.patrik can program the VCR without an owner's manual.
 
Posts: 427
Karma: 185023
Join Date: Jan 2010
Location: Sweden
Device: Kobo Aura HD, Pocketbook InkPad 3
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?
patrik is offline   Reply With Quote
Old 05-02-2019, 08:44 AM   #15
pedrovic
Junior Member
pedrovic began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Apr 2019
Location: Brazil
Device: Kindle Paperwhite
Quote:
Originally Posted by Hitch View Post
Why do you think those are "better," if I may ask?

Hitch
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
pedrovic is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Help with Chapter seperators (lines underneath chapter headings) indieauthor83 Sigil 9 06-23-2017 06:01 AM
Next chapter in the saga of poor ebook formatting Joques General Discussions 140 05-13-2015 05:31 PM
xpath to insert chapter breaks - but chapter name cut off ? Rob557 Conversion 2 03-06-2014 06:59 AM
Formatting Chapter Breaks? NVash Calibre 3 12-09-2010 05:09 AM
Formatting error causes a whole chapter to be unreadable kjturner71 Kobo Reader 3 11-08-2010 04:50 PM


All times are GMT -4. The time now is 03:49 PM.


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