Kobo not recognizing style sheet?

[Rand Brittain]

I just modified an ePub that was published several years ago and was working perfectly well in order to try out a replacement icon font that I'm commissioning for it.

While I was working on that, I also added some media queries, that I'm just learning how to use: one to make the body use lining figures and one so that the font colors would only show up if the screen supports color.

After I was done, I ran a check in Calibre, which it passed. I then ran it through the IDPF ePubCheck validator, which it also passed.

I then transferred it over to my Kobo reader. On the Kobo, it appears as though it had no stylesheet at all. I'm mystified as to why since nothing is showing me any errors in it. Is this a known problem with media queries? Is there some other reason why it might be happening?

/*

This are the basic body text and small-caps fonts.

*/
@font-face {
  src: url(../Vollkorn-Regular.ttf);
  font-family: "Vollkorn";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  src: url(../Vollkorn-Italic.ttf);
  font-family: "Vollkorn";
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
}
@font-face {
  src: url(../Vollkorn-Bold.ttf);
  font-family: "Vollkorn";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  src: url(../Vollkorn-BoldItalic.ttf);
  font-family: "Vollkorn";
  font-weight: bold;
  font-style: italic;
  font-stretch: normal;
}
@font-face {
  src: url(../VollkornSC-Bold.ttf);
  font-family: "Vollkorn SC";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  src: url(../VollkornSC-Regular.ttf);
  font-family: "Vollkorn SC";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
/*

This is the special font that contains the nine icons derived from the Chuubo's Marvelous Wish-Granting Engine system. I advise installing it on your system so that you can actually see what you're working with.

Remembering where the glyphs for these symbols go is a pain in the neck; just copy and paste them from an ePub that already includes them.

*/
@font-face {
  font-family: CG-RB-test;
  font-weight: normal;
  font-style: normal;
  src: url(../CG-RB-test-Regular.otf);
}
.chuubo {
  font-family: CG-RB-test;
  font-style: normal;
  font-weight: normal;
}
/*

These are the basic styles governing the body text.

*/
blockquote {
  margin-left: 5%;
  margin-right: 5%;
}
body {
  font-family: "Vollkorn";
  display: block;
  text-align: justify;
  widows: 1;
  orphans: 1;
}
.bold {
  font-weight: bold;
}
.break1 {
  margin-top: 0.5em;
}
.center {
  text-align: center;
  text-indent: 0;
}
.clean {
  text-indent: 0;
}
div.box {
  background-color: LightGray;
  border: 4px solid black;
  padding: 0.25em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
em {
  font-style: italic;
}
.hidden {
  display: none;
}
hr {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  visibility: hidden;
}
.italic {
  font-style: italic;
}
.left {
  text-align: left;
}
.not-italic {
  font-style: normal;
}
p {
  text-indent: 10%;
  margin-top: 0;
  margin-bottom: 0;
}
.right {
  text-align: right;
  text-indent: 0;
}
.small-caps {
  font-variant: small-caps;
  font-style: normal;
  font-family: "Vollkorn SC";
}
strong {
  font-weight: bold;
}
.subtitle {
  margin-top: 0;
  margin-bottom: 0.5em;
  text-align: right;
  font-style: italic;
  font-weight: normal;
  border-bottom: none;
}
.subtitle-over-subtitle {
  margin-top: 0;
  margin-bottom: 0;
  text-align: right;
  font-style: italic;
  font-weight: normal;
  border-bottom: none;
}
ul ul {
  list-style-type: circle;
  margin-top: 0;
  margin-bottom: 0;
}
ul ul ul {
  list-style-type: square;
  margin-top: 0;
  margin-bottom: 0;
}
ul p, ol p {
  display: list-item;
  list-style-type: none;
}
.underline {
  text-decoration: underline;
}
/*
These are the four main styles for headers and "headers." Using these styles means that a heading's appearance is unconnected to its heading level.

"header-a" is for the beginning of chapters only. It takes up an entire page. It corresponds with the h1 heading.

*/
.header-a {
  font-family: "Vollkorn SC";
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-indent: 0;
  padding-top: 40%;
  font-variant: small-caps;
}
.header-a1 {
  font-family: "Vollkorn SC";
  text-align: center;
  text-indent: 0;
  margin-top: 25%;
  font-size: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
}
.header-a2 {
  font-family: "Vollkorn SC";
  text-align: center;
  margin-top: 10%;
  text-indent: 0;
  font-variant: small-caps;
}
/*

"header-b" mimics the large headings from the book that use large font and small-caps. It roughly corresponds with h2, h3, and h4.

*/
.header-b {
  font-family: "Vollkorn SC";
  font-size: 1.3em;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  border-bottom: 3px solid black;
  text-align: left;
  text-indent: 0;
  font-weight: bold;
  font-variant: small-caps;
  page-break-after: avoid;
}
/*

"header-c" mimics the regular-sized, bold-italic headings from the book. It roughly corresponds to the h5 heading.

*/
.header-c {
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  border-bottom: 3px solid black;
  text-align: left;
  text-indent: 0;
  page-break-after: avoid;
}
/*

"header-d" mimics the regular-sized, small-caps headings from the book. It roughly corresponds to the h6 heading.

*/
.header-d {
  font-family: "Vollkorn SC";
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  border-bottom: 3px solid black;
  text-align: left;
  text-indent: 0;
  font-variant: small-caps;
  page-break-after: avoid;
}
/*

Headings break before, or after, or not, based on the following styles:

*/
.break-before {
  page-break-before: always;
}
.break-after {
  page-break-after: always;
}
/*

These are the eight Chuubo icon colors.

*/
@media (color) {
  .black {
    color: #000;
  }
  .blue {
    color: #0715cd;
  }
  .golden {
    color: #FC0;
  }
  .green {
    color: #006400;
  }
  .orange {
    color: #F93;
  }
  .purple {
    color: #660198;
  }
  .red {
    color: #e00707;
  }
  .silver {
    color: #5C5C5C;
  }
}
/* 

These are the primary CSS selector traits, that mostly involve not indenting after a heading or a table or something.

*/
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, ul + p, div + p, p.subtitle + p, p.right + p, hr + p, blockquote + p, p.border2 + p, ol + p, table + p, p.header-b + p, p.header-c + p, p.header-d + p {
  text-indent: 0;
}
div > .header-c, div > .header-d, div > .header-b {
  margin-top: 0;
}
div > p + .header-d {
  margin-top: 0.5em;
}
h3 + p.subtitle, h4 + p.subtitle, h5 + p.subtitle, h6 + p.subtitle, h3 + p.right, h4 + p.right, h5 + p.right, h6 + p.right {
  margin-top: 0;
}
p.right + p {
  margin-top: 1em;
}
blockquote, blockquote > p {
  text-indent: 0;
}
blockquote > p + p {
  text-indent: 10%;
  margin-top: 0;
}
p.header-b + p.subtitle {
  font-size: 1.2em;
}
/*

The styles below are for tables.

*/
table {
  border: 4px solid LightGray;
  border-collapse: separate;
  border-spacing: 0;
  display: table;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  text-indent: 0;
  width: 100%;
}
tr.top {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
td.center, td.left {
  vertical-align: middle;
}
td {
  padding: 2px;
}
tr.top td {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid LightGray;
}
tr:nth-child(even) {
  background-color: LightGray;
}
div.box table {
  background-color: white;
  border: 2px solid black;
}
/*

These elements modify the example of play scripts.

*/
div.example > p {
  text-indent: 0;
  margin-top: 0.5em;
}
div.example > blockquote > p {
  font-style: italic;
}
div.example > blockquote > p.header-d {
  font-style: normal;
}
/*

These styles govern footnotes and their links.

*/
a {
  text-decoration: none;
}
.footnote {
  page-break-before: always;
  padding-top: 10%;
  font-size: small;
  text-indent: 0;
}
p.footnote + p.footnote {
  page-break-before: auto;
}
.footnotelink {
  vertical-align: super;
  font-size: small;
}
p.footnote + p.footnote {
  padding-top: 0;
  text-indent: 10%;
}
/*

These styles govern the spacing for flores and luthes.

*/
.indent0 {
  text-indent: 0;
}
.indent1 {
  text-indent: 10%;
}
.indent2 {
  text-indent: 15%;
}
.indent3 {
  text-indent: 20%;
}
/*

These styles govern the divs that contain flores.

*/
div.flore {
  page-break-before: always;
  page-break-after: always;
}
div.flore blockquote {
  font-style: italic;
  padding-top: 30%;
  margin-left: 0;
  margin-right: 0;
}
/*

  These rules govern the boxes around signs and quest cards.

*/
p.border {
  padding: 0.25em;
  text-align: center;
  text-indent: 0;
  font-size: 3em;
  display: inline;
}
div.center {
  margin: 1em;
}
p.border1 {
  border-top: 4px;
  border-right: 4px;
  border-bottom: 2px;
  border-left: 4px;
  border-style: solid;
  margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 0;
  text-align: center;
  text-indent: 0;
}
p.border2 {
  border-top: 2px;
  border-right: 4px;
  border-bottom: 4px;
  border-left: 4px;
  border-style: solid;
  margin-top: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1em;
  text-align: center;
  text-indent: 0;
}
/*
These styles modify the lining and spacing of numbers on those readers that support it.
*/
@supports (font-variant-numeric: lining-nums) {
  body {
    font-variant-numeric: lining-nums;
    }
  }
@supports (font-variant-numeric: tabular-nums) {
  table, .subtitle, .right {
    font-variant-numeric: lining-nums tabular-nums;
    }
  }

[Rand Brittain]

Hm, it looks like it works fine without the media queries. That's unfortunate since I was under the impression that the RMSDK would just ignore what was in them.

[hobnail]

A kobo can completely ignore a stylesheet if there are errors in it. No idea what all constitutes an error though.

[Hitch]

Originally Posted by hobnail

A kobo can completely ignore a stylesheet if there are errors in it. No idea what all constitutes an error though.

Isn't that the vestigial ADE in the guts? If memory serves, wasn't it ADE-->iBooks-->Kobo, and the "ignore the stylesheet" crap was integral to all 3? Because the latter two originally inherited that from ADE?

Or am I getting old and daft, and misremembering this? (ENTIRELY possible...)

Hitch

[JSWolf]

RMSDK is what is in ADE. If RMSDK finds an error in the CSS, it ignores the entire CSS.

The version of RMSDK that Kobo is using is 10.x. It is equivalent to ADE 3.x. There is a more recent version of RMSDK with more ePub 3 features.

What is the media queries trying to do?

[hobnail]

If it's the @supports at the end of your css file that's causing the problem I'd just use the font-variant stuff without checking. I don't know if anything goes wrong if the font doesn't support them. For example, here's what I have in my template.epub file's css for headers (this isn't everything; spacing stuff taken out).

    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    -epub-hyphens: none;
    adobe-hyphenate: none;
    break-inside: avoid;
    break-after: avoid;
    font-feature-settings: "kern", "liga", "clig", "lnum", "pnum";
    font-variant: common-ligatures lining-nums proportional-nums;
    hyphens: none;
    page-break-after: avoid;
    page-break-inside: avoid;

For reasons I no longer remember (I probably just copied this from somewhere without trying to understand it) my css for body has slightly different stuff; oldstyle-nums instead of lining-nums.

    font-feature-settings: "kern", "liga", "clig", "onum", "pnum";
    font-kerning: normal;
    font-variant: common-ligatures oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;

[JSWolf]

Originally Posted by hobnail

If it's the @supports at the end of your css file that's causing the problem I'd just use the font-variant stuff without checking. I don't know if anything goes wrong if the font doesn't support them. For example, here's what I have in my template.epub file's css for headers (this isn't everything; spacing stuff taken out).

    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    -epub-hyphens: none;
    adobe-hyphenate: none;
    break-inside: avoid;
    break-after: avoid;
    font-feature-settings: "kern", "liga", "clig", "lnum", "pnum";
    font-variant: common-ligatures lining-nums proportional-nums;
    hyphens: none;
    page-break-after: avoid;
    page-break-inside: avoid;

For reasons I no longer remember (I probably just copied this from somewhere without trying to understand it) my css for body has slightly different stuff; oldstyle-nums instead of lining-nums.

    font-feature-settings: "kern", "liga", "clig", "onum", "pnum";
    font-kerning: normal;
    font-variant: common-ligatures oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;

Those font features settings won't work with the version of RMSDK Kobo is using. But, by default, RMSDK supports ligatures.

[Hitch]

Originally Posted by JSWolf

RMSDK is what is in ADE. If RMSDK finds an error in the CSS, it ignores the entire CSS.

The version of RMSDK that Kobo is using is 10.x. It is equivalent to ADE 3.x. There is a more recent version of RMSDK with more ePub 3 features.

What is the media queries trying to do?

Yeah, I thought that was it, Ye Olden ADE stuff. :-) Thank you, Wolfie, for the clarification. (My crew is perfectly inured to my "doohickeys" and "thingies," "stuff," and all that, bless their hearts. Happily, mostly, they know what I mean.)

Hitch

[Jellby]

Originally Posted by hobnail

If it's the @supports at the end of your css file that's causing the problem I'd just use the font-variant stuff without checking. I don't know if anything goes wrong if the font doesn't support them.

@supports doesn't query the font, it queries the renderer, i.e., it queries support for the font-variant-numeric property in this case. And in that case I think the @support rule is unnecessary, because a renderer that doesn't support the requested property should just ignore it (except if it's RMSDK, which chokes on unknown stuff, but if it turns out to choke on @supports too, then nothing is gained either way).

[JSWolf]

Think is, if it doesn't work with the version of RMSDK Kobo is using, either don't do it or find something else to do. The problem is that there are a lot of Readers/programs out there using older versions of RMSDK and they won't work with what you are trying to do. RMSDK is the most used software for displaying ePub and not all of those versions out there are up-to-date.

[JSWolf]

The @supports is not causing the CSS to be ignored. It the @media query that's causing the CSS to be ignored.

[davidfor]

Originally Posted by JSWolf

Think is, if it doesn't work with the version of RMSDK Kobo is using, either don't do it or find something else to do. The problem is that there are a lot of Readers/programs out there using older versions of RMSDK and they won't work with what you are trying to do. RMSDK is the most used software for displaying ePub and not all of those versions out there are up-to-date.

The RMSDK supports some media queries. And it seems to need the device to be specifed. The code that @Rand Britten has posted fails with the RMSDK on my Kobo devices. But, changing the query to:

@media screen and (color) ...

and it works. It also works with "all". Either worked with the kepub renderer.

I did try some other media queries. I tried to test using "@media screen and (min-width: 600px)", but the RMSDK rejected that. This worked with kepubs (though the screen width wasn't exactly what I expected).

A little problem with the above test for "color" is that Kobo devices render in colour. It is a later step that changes it to grey scale. So, the above test is "true".

I tried the @support as well. This didn't break either the RMSDK or the kepub renderer. But, I am not sure if it works. I'm not sure enough of what it can test to be sure I have a valid test for these devices.

[Quoth]

Yes, a screen capture on Kobo is in colour if the ebook is!

[JSWolf]

Originally Posted by davidfor

The RMSDK supports some media queries. And it seems to need the device to be specifed. The code that @Rand Britten has posted fails with the RMSDK on my Kobo devices. But, changing the query to:

@media screen and (color) ...

and it works. It also works with "all". Either worked with the kepub renderer.

I did try some other media queries. I tried to test using "@media screen and (min-width: 600px)", but the RMSDK rejected that. This worked with kepubs (though the screen width wasn't exactly what I expected).

A little problem with the above test for "color" is that Kobo devices render in colour. It is a later step that changes it to grey scale. So, the above test is "true".

I tried the @support as well. This didn't break either the RMSDK or the kepub renderer. But, I am not sure if it works. I'm not sure enough of what it can test to be sure I have a valid test for these devices.

I've see plenty of ePub that has @media for Kindles that does not fail with RMSDK.

As for @support, given the version of RMSDK Kobo is using, I would say it would not work. To use font features, you would need a later (or current) RMSDK.

[davidfor]

Originally Posted by JSWolf

I've see plenty of ePub that has @media for Kindles that does not fail with RMSDK.

And I have demonstrated some @media work with RMSDK, and explicitly stated some that don't and what is needed to get others to work. So, what is your point?

As for @support, given the version of RMSDK Kobo is using, I would say it would not work. To use font features, you would need a later (or current) RMSDK.

You keep saying that. But, you also keep not telling us what version of the RMSDK Kobo is using. You also won't tell me what the differences are between it and the super wonderful version that Kobo, in your words, "refuses" to update to.