Chapter formatting

[patrik]

Originally Posted by Turtle91

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

Feel sort of funny to tell someone with your skills that they are dead wrong. (Which makes it likely I'm the one doing something wrong here... )

In this case the challenge was to have one sort of space between the two lines, and another between the second line _if_ it got split up on two lines on the device, within the same h#.

Your example did all that. Jon's didn't.

Your new example is shifting the goal post by moving the second line outside the header. You don't get a correct toc now, without adding other stuff.

But, it's yet another example of how one can do "two chapter lines", so it's still helpful.

[Turtle91]

Originally Posted by patrik

Feel sort of funny to tell someone with your skills that they are dead wrong. (Which makes it likely I'm the one doing something wrong here... )

In this case the challenge was to have one sort of space between the two lines, and another between the second line _if_ it got split up on two lines on the device, within the same h#.

Your example did all that. Jon's didn't.

Your new example is shifting the goal post by moving the second line outside the header. You don't get a correct toc now, without adding other stuff.

But, it's yet another example of how one can do "two chapter lines", so it's still helpful.

lolz...no worries...I'm wrong WAY more often than I'm right! I'm glad it's working for you!

[JSWolf]

Originally Posted by Turtle91

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.

Sorry, but that won't work on most Readers that handle ePub. The version of ADE used may not support font-variant. So if you use it, don't expect it to work. So you have to do simulated small-caps. And don't make the small-caps too small as a lot of publishers do.

[JSWolf]

Originally Posted by patrik

Feel sort of funny to tell someone with your skills that they are dead wrong. (Which makes it likely I'm the one doing something wrong here... )

In this case the challenge was to have one sort of space between the two lines, and another between the second line _if_ it got split up on two lines on the device, within the same h#.

Your example did all that. Jon's didn't.

Your new example is shifting the goal post by moving the second line outside the header. You don't get a correct toc now, without adding other stuff.

But, it's yet another example of how one can do "two chapter lines", so it's still helpful.

There may not be a way to do a two line chapter title/subtitle such that the auto ToC generator gets it correct. That's the problem. Also, I've see <h2> used for the main chapter heading and <h3> used for the subheading. That would also allow for both the heder and subheader to be auto added to the ToC. But you would still have to edit the ToC if you wanted the ToC to include the subheader.

[Turtle91]

Originally Posted by JSWolf

Sorry, but that won't work on most Readers that handle ePub. The version of ADE used may not support font-variant. So if you use it, don't expect it to work. So you have to do simulated small-caps. And don't make the small-caps too small as a lot of publishers do.

Originally Posted by JSWolf

There may not be a way to do a two line chapter title/subtitle such that the auto ToC generator gets it correct. That's the problem. Also, I've see <h2> used for the main chapter heading and <h3> used for the subheading. That would also allow for both the heder and subheader to be auto added to the ToC. But you would still have to edit the ToC if you wanted the ToC to include the subheader.

Jon you totally missed the boat....

The example is designed to show how to do multiple lines with a single <h?> tag, how the proper use of display:block works, and that by using it properly the auto TOC functions work just fine.

It is NOT designed to show all the different styling possibilities like font-variant - I just like small caps and it works on my devices so I use it... I'm not going to filter my advice just because some, IMO inferior , devices can't handle proper CSS. (looking at you ADE)

If you note the "/* (however you want to style it) */" at the top of the CSS section you could deduce that the OP could style it.....wait for it.... however they want to style it.


Cheers,

[graycyn]

So I tried Turtle91's method for chapter number and title and it worked great! No troubles on ADE, iBooks or Kindle. Many thanks!

BUT, I ran the epub through Kepubify and loaded the kepub on my Kobo Aura One and it didn't work there.

What happened was the h2 styling was mostly ignored and the span honored. Both chunks of text displayed at 1.4em font size, bold and left-aligned. The look I was trying to achieve was with the chapter number RIGHT aligned (not bold) and the chapter title LEFT aligned (bold), mimicking the print book.

But in the kepub, I got both showing LEFT aligned and at the font size and weight set for the chapter title.

This is the CSS. It validated. So did the epub before Kepubifying it.

{
font-size: .96em;
font-weight: normal;
font-style: normal;
text-align: right;
text-indent: 0;
margin-top: 18%;
margin-bottom: 15%;
}

h2 span
{
display: block;
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 2em;
}

And the HTML:

<h2>CHAPTER 1<span>Chapter Title</span></h2>

The look in the kepub is readable, just not nice looking. I was able to make it work for kepub, by assigning spans and classes to both chapter number and title and styling accordingly, that solution works across the board, ADE, iBooks, Kindle, Kobo kepub, but it's NOT elegant.

So did I do anything wrong here that prevented it from working as kepub or is it a Kobo thing? Or possibly a Kepubify issue?

[DNSB]

Originally Posted by graycyn

So I tried Turtle91's method for chapter number and title and it worked great! No troubles on ADE, iBooks or Kindle. Many thanks!

BUT, I ran the epub through Kepubify and loaded the kepub on my Kobo Aura One and it didn't work there.

What happened was the h2 styling was mostly ignored and the span honored. Both chunks of text displayed at 1.4em font size, bold and left-aligned. The look I was trying to achieve was with the chapter number RIGHT aligned (not bold) and the chapter title LEFT aligned (bold), mimicking the print book.

But in the kepub, I got both showing LEFT aligned and at the font size and weight set for the chapter title.

This is the CSS. It validated. So did the epub before Kepubifying it.

Spoiler:

{
font-size: .96em;
font-weight: normal;
font-style: normal;
text-align: right;
text-indent: 0;
margin-top: 18%;
margin-bottom: 15%;
}

h2 span
{
display: block;
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 2em;
}

And the HTML:

<h2>CHAPTER 1<span>Chapter Title</span></h2>

The look in the kepub is readable, just not nice looking. I was able to make it work for kepub, by assigning spans and classes to both chapter number and title and styling accordingly, that solution works across the board, ADE, iBooks, Kindle, Kobo kepub, but it's NOT elegant.

So did I do anything wrong here that prevented it from working as kepub or is it a Kobo thing? Or possibly a Kepubify issue?

The only time I played with splitting lines left/right turned into a mess. I could get the lines aligned but I had fun trying to get the vertical alignment correct and finally gave up.

<div>
  <h2 class="leftie"><span class="biggun">Chapter Title</span></h2>
  <h2 class="rightie">Chapter 1</h2>
</div>
<div style="clear: both;"></div>

.leftie {
	float: left;
}
.rightie {
	float: right;
}
h2 {
font-size: 1em;
font-weight: normal;
font-style: normal;
margin-top: 2em;
margin-bottom: 2em;
}

.biggun {
font-size: 1.4em;
font-weight: bold;
}

Good luck...

[graycyn]

I suppose I could try with both lines left or a traditional centered alignment for both. But the left/right thing works beautifully and exactly as I wanted it to look everywhere BUT kepub. And it's a look I've encountered in more than one book. I don't *have* to mimic the print style, but I like to come close when I can.

I'd still want chapter number to be smaller than chapter title, and I'm not convinced that will convert to kepub successfully just by changing to a more traditional alignment, but I will try it just to see. Who knows, maybe it was the alignment that threw off the kepub?


Sent from my iPad using Tapatalk

[JSWolf]

Originally Posted by graycyn

So I tried Turtle91's method for chapter number and title and it worked great! No troubles on ADE, iBooks or Kindle. Many thanks!

BUT, I ran the epub through Kepubify and loaded the kepub on my Kobo Aura One and it didn't work there.

What happened was the h2 styling was mostly ignored and the span honored. Both chunks of text displayed at 1.4em font size, bold and left-aligned. The look I was trying to achieve was with the chapter number RIGHT aligned (not bold) and the chapter title LEFT aligned (bold), mimicking the print book.

But in the kepub, I got both showing LEFT aligned and at the font size and weight set for the chapter title.

This is the CSS. It validated. So did the epub before Kepubifying it.

{
font-size: .96em;
font-weight: normal;
font-style: normal;
text-align: right;
text-indent: 0;
margin-top: 18%;
margin-bottom: 15%;
}

h2 span
{
display: block;
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 2em;
}

And the HTML:

<h2>CHAPTER 1<span>Chapter Title</span></h2>

The look in the kepub is readable, just not nice looking. I was able to make it work for kepub, by assigning spans and classes to both chapter number and title and styling accordingly, that solution works across the board, ADE, iBooks, Kindle, Kobo kepub, but it's NOT elegant.

So did I do anything wrong here that prevented it from working as kepub or is it a Kobo thing? Or possibly a Kepubify issue?

That CSS code you have for chapter titles is just awful. Scrap it and start over. You have way too much wasted screen space and that does look ugly. Think of using smaller space around the chapter header. Try 1em top/bottom margin. Try the default size you get with H2. Don't left justfiy. Center justify.

[JSWolf]

Originally Posted by graycyn

So I tried Turtle91's method for chapter number and title and it worked great! No troubles on ADE, iBooks or Kindle. Many thanks!

BUT, I ran the epub through Kepubify and loaded the kepub on my Kobo Aura One and it didn't work there.

What happened was the h2 styling was mostly ignored and the span honored. Both chunks of text displayed at 1.4em font size, bold and left-aligned. The look I was trying to achieve was with the chapter number RIGHT aligned (not bold) and the chapter title LEFT aligned (bold), mimicking the print book.

But in the kepub, I got both showing LEFT aligned and at the font size and weight set for the chapter title.

This is the CSS. It validated. So did the epub before Kepubifying it.

{
font-size: .96em;
font-weight: normal;
font-style: normal;
text-align: right;
text-indent: 0;
margin-top: 18%;
margin-bottom: 15%;
}

h2 span
{
display: block;
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 2em;
}

And the HTML:

<h2>CHAPTER 1<span>Chapter Title</span></h2>

The look in the kepub is readable, just not nice looking. I was able to make it work for kepub, by assigning spans and classes to both chapter number and title and styling accordingly, that solution works across the board, ADE, iBooks, Kindle, Kobo kepub, but it's NOT elegant.

So did I do anything wrong here that prevented it from working as kepub or is it a Kobo thing? Or possibly a Kepubify issue?

That CSS code you have for chapter titles is just awful. Scrap it and start over. You have way too much wasted screen space and that does look ugly. Think of using smaller space around the chapter header. Try 1em top/bottom margin. Try the default size you get with H2. Don't left justify. Center justify.

[Turtle91]

...says the opinion police....twice!!

[graycyn]

Originally Posted by JSWolf

That CSS code you have for chapter titles is just awful. Scrap it and start over. You have way too much wasted screen space and that does look ugly. Think of using smaller space around the chapter header. Try 1em top/bottom margin. Try the default size you get with H2. Don't left justfiy. Center justify.

You are missing the point. I'm looking to retain the feel of the vintage print title style. And what I'm asking is why the simple h2 span code works everywhere but kepub. And whether there is a way to make the h2 span also work in kepub.

I may scrap trying to mimic print for this book, but I personally don't mind screen space used around chapter heads. Paper got wasted in print books for chapter headers and I wasn't bugged by that!

It'd be kind of boring if every ebook looked the same.


Sent from my iPad using Tapatalk

[PeterT]

I wonder if there might be any applicable guidelines in https://github.com/kobolabs/epub-spe...ster/README.md especially regarding the use of em measurements

Sent from my moto g(7) power using Tapatalk

[graycyn]

Originally Posted by PeterT

I wonder if there might be any applicable guidelines in https://github.com/kobolabs/epub-spe...ster/README.md especially regarding the use of em measurements

Sent from my moto g(7) power using Tapatalk

I think you may have found it!

This seems like it might be the issue:

Choosing Selectors

Kobo advises against applying styles to type selectors alone, like the div or span selectors. It is safer to style and easier to debug CSS that is as specific as possible. Increase specificity by selecting for type and class, or by selecting for nesting structure. In addition, Kobo inserts div and span tags during processing to enable user functionality (ex. text highlighting). As a result, any content contained within the added tags will inherit the styling applied in the CSS.

Going more specific by applying spans and classes did work, and it seems this is what they are suggesting. I'd forgotten that kepub has extra div and span tags added.

I sure liked the simplicity of h2 span, but I think I'd rather have a book that, when converted to kepub, looks the same as it would in ADE, Kindle and iBooks.


Sent from my iPad using Tapatalk

[JSWolf]

Originally Posted by graycyn

You are missing the point. I'm looking to retain the feel of the vintage print title style. And what I'm asking is why the simple h2 span code works everywhere but kepub. And whether there is a way to make the h2 span also work in kepub.

I may scrap trying to mimic print for this book, but I personally don't mind screen space used around chapter heads. Paper got wasted in print books for chapter headers and I wasn't bugged by that!

It'd be kind of boring if every ebook looked the same.


Sent from my iPad using Tapatalk

But using a % like you did is not going to work. It means that with different size screens, you get different amounts of space. Also, you have to remember, this is a screen. What may have worked for a pBook doesn't mean it works for an eBook. You may not be able to duplicate the look and feel of this pBook and have it work. It's a different medium. For example, I've seen pBooks where the hardcover was printed exactly the same for a MMPB and because of this, the size of the print for the MMPB was too small.

Don't do things that don't work. 18% and 15% space around a chapter title does not work for an eBook. Having offset text (like in a blockquote) be smaller doesn't always work. Having the main text be smaller then 1em doesn't work. Having large left/right margins doesn't work. Embedding a font just because it was the font used in the pBook doesn't work (there are cases where it does work, but in most cases it doesn't work). Graphics have to be of high resolution or they may not work. Do not a graphics of text just because it's easier then created the code as that doesn't work. You have to create your eBook so it works as an eBook and no as thought it was a pBook.