Hunting for what I assumed was a bug in one of my books I stumbled upon some strange behaviour in Calibre Viewer. It took me a while to identify the culprit(s) (or better, the combination thereof). I boiled it down to this test file:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style>
p {
color: red;
}
@supports(display: flex) {
p {color: green;}
}
h1 {
break-after: avoid;
page-break-after: avoid; /* delete here... */
break-inside: avoid;
page-break-inside: avoid; /* ...and here... */
}
@supports(font-variant-numeric: oldstyle-nums) {
p.test {color: blue;} /* ...or remove class */
}
</style>
</head>
<body>
<p class="test">Test</p>
</body>
</html>
Chrome, FF, Opera, and Edge work as expected and render blue text. Calibre Viewer only accepts the first feature query and produces the text in green.
There would be two ways two make CV understand the second query:
- Delete page-break-after and page-break-inside from the completely unrelated h1 declaration (break-after and break-inside seem to be no problem).
- Or, remove the class test from the p selector.
Sadly, none of these are acceptable workarounds in my case.
Tested with Calibre 6.2.1 (from PortableApps) and some old 5.x installed version on Windows 10.