:first line and the B&N Nook

4 posts / 0 new
Last post

Hello,

New to the forum, first post, and I need a little advice. I've designed an ebook that displays well over various formats except for the Nook. I have a CSS style setup for first line small caps that will not show.

Example:

p.body-no-indent:first-line

with the font variant element set to "small-caps"

Any suggestions for what I could do differently?

Not to venture too far down the road of hacked solutions, but my first thought would be to consider a fallback like adding small caps to the first three (or so) words via a span and traditional CSS class, especially if it's only one device causing you problems.

If the first-line selector isn't supported, you'll still still get small caps support on those words at a minimum (and when the device catches up in support, the problem goes away).

It doesn't net you universal first-line small caps support, but maybe it'll do in a world where the first line is fluid anyway?

 

(Of course, someone somewhere will have a device that only renders two words per line and leave you with run-over small caps, but those are the tolerances you're left to worry about when you start working around any device!)

Thanks for the response; I figured I would need to limit the small caps as you stated but wanted to see if someone else might have a solution. Variable text flow just requires a bit of aesthetic flexibility on the part of the designer, I guess, haha...

Ideally you shouldn't have to work around missing CSS support that's in the baseline, but there's always that chasm between the specification and the current state of any reading system.

My preference is for simple fallbacks because the alternative is trying to script a workaround, and that inevitably opens up even more problems than you started with (putting aside not all readers are necessarily going to have support). Plus you're stuck with whatever faults get exposed, unlike the fallback approach which typically gets masked once support is finally implemented.

There's a thread on stackoverflow, for example, that suggests dynamically wrapping every word in a span and then checking for the change in position from the top of the viewport to find the start of a new line. You could adapt for your purposes, but notice all the caveats expressed in the answer.

Secondary menu