I had an idea for the epub standard, and want to know your thoughts.

[JSWolf]

Originally Posted by rjwse@aol.com

That is just your opinion. Dropcaps and raised caps are an under-the-surface psychological reminder that something more than just a new paragraph is about to begin. No, they are not absolutely necessary, but neither is enlarged and/or centered type for H1, H2 or anything else. We could get by writing teletype, all in caps without extended ascii, with ragged right margin, etc. Dropcaps are like picture frames on an oil painting — don't absolutely need them. Shakespeare never specified, "Hey, put in a dropcap here." But they are more than 'de frivole.' I would be more inclined to shitcan the needlessly expensive school textbook racket in favor of public domain, free textbooks in ebook format than get rid of dropcaps. I would like to see crippled, poorly designed ereaders catch up with all the new code. (Just my opinion; I'm feeling grumpier than usual today; no offense intended.)

Can you tell me how to make a dropcap look good if I change the font, change the font size, and/or change the line height?

[rjwse@aol.com]

Why, yes. That is my opinion and one I feel entitled to hold. From when I was working in the Ubyssey newspaper...

That settles it. then. The world-renouned Ubyssey newspaper is our standard.

[Turtle91]

Originally Posted by JSWolf

Can you tell me how to make a dropcap look good if I change the font, change the font size, and/or change the line height?

Jon - we understand you don’t think they look good. Nothing we say (or have said many times) will change your mind. If you really want to know, then please re-read (or maybe read for the first time) the directions given many times before…

[Falkor]

Originally Posted by Quoth

The secret is to realise that the ebook specs started out simply for simple novels with either images in their own paragraph and centred, or small. In both cases no frame in MS Word/LO Writer and "anchor as character". Superscript and subscript work if carefully styled. Forget things like SMALL CAPS, raised caps, drop caps; anyway many readers don't like them they reduce reading comprehension and have erratic support. Accessibility is important, so alt text for every image and not trying to be clever or fancy.

If you are doing a text book, or fancy stuff in epub3, accept that it won't work for many and widespread commercial distribution will either be rejected or cause problems for purchasers.

Personally, I consider them to be electronic books – so one should be able to style them somewhat like a book.

The "fancy" stuff is usually not that difficult. "Initial-letter" works pretty well and is widely supported – I don't have any reading app that doesn't support it. If it's not supported by a renderer it's not a big deal either. It can simpy be ignored (though I really think this absolutely needs to be supported on modern reading devices. Drop caps and raised caps are widely used and initial-letter is great solution for all the problems everybody is having with them).

Mirrored text (with an svg wrapper) works flawlessly for me as well.

On the other hand I've been trying to keep images and captions together on one page with <figure> and <figcaption>. Sounds very basic, but it's surprisingly challenging. With four different reading applications I can get four different results. They all behave very differently.

Also page breaks: epub is a format for books. The content is almost always displayed as pages. Yet the concept of pages is not even implemented into many readers and they use columns instead–and the two concepts may clash. Setting pagebreaks with CSS should really be quite simple. But the only way to make them work consistently in all reading apps is by splitting up the document.

Originally Posted by JSWolf

Can you tell me how to make a dropcap look good if I change the font, change the font size, and/or change the line height?

That's what the "initial-letter" property is for. You set the size and sink and the renderer calculates the actual height and placement depending on the line height and font size.

[Slevin#7]

Originally Posted by Falkor

On the other hand I've been trying to keep images and captions together on one page with <figure> and <figcaption>. Sounds very basic, but it's surprisingly challenging. With four different reading applications I can get four different results. They all behave very differently.

May I ask, what is your solution to that? I haven't had any success with that and ended up putting the caption into the image as grafical part of it - not a very pretty solution.

[DNSB]

Originally Posted by rjwse@aol.com

That settles it. then. The world-renouned Ubyssey newspaper is our standard.

World-renowned? Unlikely. A good place to start learning about typography? At that time and place, it was exactly that. The people who actually printed the newspaper and from whom I learned my starting lessons about typography from had decades of experience and, luckily for me, were more than willing to share that experience with a snot-nosed kid.

Also try to remember that a physical book has the advantage that people are not going to be changing the font, font size, line spacing, margins, etc. on the final product. An ebook? Quite a few people will be doing all of those.

[Falkor]

Originally Posted by Slevin#7

May I ask, what is your solution to that? I haven't had any success with that and ended up putting the caption into the image as grafical part of it - not a very pretty solution.

This kinda works for me:

<figure>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 960 1207" preserveAspectRatio="xMidYMid meet"><image width="960" height="1207" xlink:href="../picture.jpg"/></svg>
  <figcaption>This is a caption</figcaption>
</figure>

figure {
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  display:block;
}

figure > svg {
  height:80vh;
  width:100%;
}

figcaption {
  height:18vh;
  }

The trick was to not give the figure a height. That eliminated all kinds of issues.

[JSWolf]

Originally Posted by Falkor

Personally, I consider them to be electronic books – so one should be able to style them somewhat like a book.

The "fancy" stuff is usually not that difficult. "Initial-letter" works pretty well and is widely supported – I don't have any reading app that doesn't support it. If it's not supported by a renderer it's not a big deal either. It can simpy be ignored (though I really think this absolutely needs to be supported on modern reading devices. Drop caps and raised caps are widely used and initial-letter is great solution for all the problems everybody is having with them).

Mirrored text (with an svg wrapper) works flawlessly for me as well.

On the other hand I've been trying to keep images and captions together on one page with <figure> and <figcaption>. Sounds very basic, but it's surprisingly challenging. With four different reading applications I can get four different results. They all behave very differently.

Also page breaks: epub is a format for books. The content is almost always displayed as pages. Yet the concept of pages is not even implemented into many readers and they use columns instead–and the two concepts may clash. Setting pagebreaks with CSS should really be quite simple. But the only way to make them work consistently in all reading apps is by splitting up the document.



That's what the "initial-letter" property is for. You set the size and sink and the renderer calculates the actual height and placement depending on the line height and font size.

So how do you do a drop cap for ePub 2? There is no initial letter. I prefer to read on my Kobo with ePub because it renders better. I will read with KePub when there is a need for it. But a drop cap is not a need for KePub.

[JSWolf]

Originally Posted by Falkor

This kinda works for me:

<figure>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 960 1207" preserveAspectRatio="xMidYMid meet"><image width="960" height="1207" xlink:href="../picture.jpg"/></svg>
  <figcaption>This is a caption</figcaption>
</figure>

figure {
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  display:block;
}

figure > svg {
  height:80vh;
  width:100%;
}

figcaption {
  height:18vh;
  }

The trick was to not give the figure a height. That eliminated all kinds of issues.

Are your eBooks supposed to be backwards compatible? Because if so, your code won't work. If not, then your code is OK.

[DNSB]

Originally Posted by JSWolf

So how do you do a drop cap for ePub 2? There is no initial letter. I prefer to read on my Kobo with ePub because it renders better. I will read with KePub when there is a need for it. But a drop cap is not a need for KePub.

The same way it's been done for decades. You wrap the first letter of the first paragraph in a chapter with a span. It may not be pretty but it's works until you change the view settings too far. From one recent ePub book:

<p class="first first-in-chapter first-full-width first-with-first-letter-m"><span class="first-letter first-letter-m first-letter-without-punctuation">M</span>

And yes, this ebook has 20 first-with-first-letter-? styles for the paragraphs and 20 first-letter-? styles for each of the spans.

[Falkor]

Originally Posted by JSWolf

Are your eBooks supposed to be backwards compatible? Because if so, your code won't work. If not, then your code is OK.

Right, for backwards compatibility one would at least have to offer alternatives for all the heights in vh.

Originally Posted by JSWolf

So how do you do a drop cap for ePub 2? There is no initial letter. I prefer to read on my Kobo with ePub because it renders better. I will read with KePub when there is a need for it. But a drop cap is not a need for KePub.

The simplest way would be not to provide any fallback at all because it just doesn't work that well in epub2 (and even epub3 without support for initial-letter). So I'd use

@supports (initial-letter: 2) {…}

around the entire rule. Technically that's not supported by epub2 either, but as invalid rules must be ignored, it still does the trick.

This will also eliminate problems with renderers that support :first-letter, but not initial letter.

If you must have drop caps in epub2 as well, I guess you could still add spans and style them. Then you'd have to undo the span’s styling for all renderers that support initial-letter.

[Turtle91]

Originally Posted by Falkor

Right, for backwards compatibility one would at least have to offer alternatives for all the heights in vh.



The simplest way would be not to provide any fallback at all because it just doesn't work that well in epub2 (and even epub3 without support for initial-letter). So I'd use

@supports (initial-letter: 2) {…}

around the entire rule. Technically that's not supported by epub2 either, but as invalid rules must be ignored, it still does the trick.

This will also eliminate problems with renderers that support :first-letter, but not initial letter.

If you must have drop caps in epub2 as well, I guess you could still add spans and style them. Then you'd have to undo the span’s styling for all renderers that support initial-letter.

Doesn't the @supports include an if/then/else format?? That gives you the css to set if it doesn't support the selector.

[JSWolf]

Originally Posted by Falkor

Right, for backwards compatibility one would at least have to offer alternatives for all the heights in vh.

The problem is that when you vh or % (ie, margin, height, etc) whichever is second in the CSS is what's used. So if the reading software doesn't do vh, and that's second, it won't do anything. Neither will do anything.

The simplest way would be not to provide any fallback at all because it just doesn't work that well in epub2 (and even epub3 without support for initial-letter). So I'd use

@supports (initial-letter: 2) {…}

around the entire rule. Technically that's not supported by epub2 either, but as invalid rules must be ignored, it still does the trick.

This will also eliminate problems with renderers that support :first-letter, but not initial letter.

If you must have drop caps in epub2 as well, I guess you could still add spans and style them. Then you'd have to undo the span’s styling for all renderers that support initial-letter.

You have to be careful. If ADE 2.0.1 or 3.x thinks your code is a mistake, the entire CSS will be ignored.

What would happen if you had first-letter and a span for a program that supports both? This is a good reason to forgo drop caps if you need ePub2 compatibility.

[JSWolf]

Originally Posted by Turtle91

Doesn't the @supports include an if/then/else format?? That gives you the css to set if it doesn't support the selector.

That's a very good suggestion.

[Quoth]

K I S S

Which is more important? Everyone being able to read it easily on anything, or being stubborn about a display feature?

If it's for personal use you can be as clever as you like. Sometimes for mass publication being clever is dumb.