How to deal with User Settings - JayPanoz/Soma GitHub Wiki

Not disabling user settings is a tough challenge, especially as there is no specification on style overrides. In other words, while those tricks work with major Reading Systems and popular devices/apps built on top of it, they may not with some others.

Typeface

The typeface used for body copy is declared for body. All other elements inherit from it. When this font-family declaration is overridden in the user stylesheet, it will change for all elements inheriting from it.

Check “How to embed fonts” for more and don’t declare font-family for paragraphs, lists and spans, please.

Font size

Quite simply, we are using em values. % can be used too. For further details, take a look at “Which unit should I use?”

Line height

That’s a tricky one. You’d think that ratios (unitless integer) or em values can help solve this problem but they don’t—looking at you, Kindle and Kobo!

So, basically, we just declare a line-height for body and let all other elements sharing the same value inherit from it.

body {
  line-height: 1.5;
}

p {
  line-height: inherit;
}

li {
  line-height: inherit;
}

In case you are wondering why we declare line-height: inherit, that’s because some RS don’t have that as a default and will apply another line-height value if you don’t.

For the record, it doesn’t disable the Kindle’s user setting because… Kindle doesn’t support inherit in the first place—cool, huh?

Night Modes

That is by far the trickiest one, especially as the vast majority of RS devs didn’t bother implementing “alternate stylesheets”, a spec that’s been around since 2011.

So here’s how we deal with that for various stuff.

Black Text

Once again, inherit to the rescue. When using color: inherit, you’ll get black (or light gray in night modes).

For links in iBooks, you now have to use -webkit-text-fill-color: inherit if you want black colored links. For usa- and accessibility’s sake, don’t forget that at least two differentiating styles must be declared so that a link can be perceived as a link if you do that.

Background color

Remember this dirty spacer GIF?

It’s back.

Only this time it is not transparent as we will use a colored background-image as a background-color because RS usually override the latter in night modes.

So basically, make a small image the color of your background, use it to style your box (an aside for instance), !important all your color-related declarations for the text inside your box and you’re cool.

To document the insanity of such a trick, here’s the CSS:

.box {
  background: value url('path/to/colored-image') repeat;
}
.box > p {
  color: value !important;
  -webkit-text-fill-color: value !important;
}

But at least we’re not using table to lay out our document.

Horizontal Rule

You’d think Soma’s hr is over-engineered but it definitely isn’t.

As a reminder, here is our hr styling:

hr {
  width: 25%;
  margin: 1.4375em 37.5%;
  height: 0;
  border: none;
  border-top: 0.125em solid currentColor;
  opacity: 0.5;
}

So yeah, we are using border-top in combination with opacity.

“WTF! [Insert Jackie Chan meme here] How is that, kitty.”

OK, let me explain that step by step before throwing me under the bus.

  1. margin has to use 100% - (width/2) for -right and -left since, well, a footnote in the ePub2 spec states that the value auto can default to O. And Indeed, it defaults to 0 in RMSDK so margin: 1.4375em auto won’t center our hr in an awful lot of apps/devices—yep, we all hate the guys who green lighted that and they will be remembered as “the guys making our lives miserable”.
  2. We reset the border because it’s so damn ugly by default.
  3. we add a 2 pixels border-top with the keyword currentColor to draw a black rule. It must be border-top because dat RMSDK won’t take margin-top and margin-bottom into account if we use border-bottom.
  4. We add opacity to make it grayscale. Epic win, kill me now.

“But why going with a rule?” you may ask…

Look, I’d love to make that an asterism by default but there are some issues we have to deal with.

  • As a background-image of hr, good luck: a transparent PNG or a JPEG with a white background won’t be inverted in night modes, background sizing won’t work in ePub2—and even EPUB3, looking at you, Google!—so it won’t resize when the user increases font-size.
  • Using content with selectors :before and :after is no solution as ePub2 is not supposed to support that.
  • <p class="asterism">* * *</p> is unsemantic. In HTML5, hr is meant to represent the thematic break you’re trying to imply there.

And that’s it, welcome to the crappiest development ecosystem ever.