Skip to content

Commit 00e3905

Browse files
heckjheckj
committed
asciidoc epub3 stock - no change with this, but sets up to tweak rendering
1 parent 3226e21 commit 00e3905

File tree

4 files changed

+1587
-0
lines changed

4 files changed

+1587
-0
lines changed

‎docs/styles/epub3-css3-only.css‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
/* @page is for EPUB2 only */
2+
@page {
3+
margin: 0;
4+
}
5+
6+
body.calibre-desktop {
7+
padding: 20pt 0 !important;
8+
}
9+
10+
body.calibre-desktop > section {
11+
margin: 0 25pt;
12+
}
13+
14+
/* Gitden & Namo default to 16px font-size; bump it to 19px (118.75%) */
15+
body.gitden-reader,
16+
body.namo-epub-library {
17+
font-size: 118.75%;
18+
}
19+
20+
/* Gitden doesn't give us much margin, so let's roughly match Aldiko and Kindle (narrow setting) */
21+
body.gitden-reader {
22+
margin: 0 5pt !important;
23+
}
24+
25+
/* Namo has the same margin problem, except setting side margins doesn't work */
26+
/*body.namo-epub-library > section.chapter {
27+
margin: 0 5pt;
28+
}*/
29+
30+
/* Use tighter margins and smaller font (18px) on phones (Nexus 4 and smaller) */
31+
@media only screen and (max-device-width: 768px) and (max-device-height: 1280px),
32+
only screen and (max-device-width: 1280px) and (max-device-height: 768px) {
33+
body.gitden-reader,
34+
body.namo-epub-library {
35+
font-size: 112.5%;
36+
}
37+
38+
/*body.gitden-reader {
39+
margin: 0 5pt !important;
40+
}*/
41+
42+
/*body.namo-epub-library > section.chapter {
43+
margin: 0 5pt;
44+
}*/
45+
}
46+
47+
body.gitden-reader pre {
48+
white-space: pre-wrap !important; /* Gitden must be applying white-space: pre !important */
49+
}
50+
51+
body h1, body h2, body h3:not(.list-heading), body h4, body h5, body h6,
52+
h1 :not(code), h2 :not(code), h3:not(.list-heading) :not(code), h4 :not(code), h5 :not(code), h6 :not(code) {
53+
/* !important required to override custom font setting in Kindle / Gitden / Namo */
54+
/* Gitden requires the extra weight of a parent selector; it also makes headings bold when custom font is specified */
55+
/* Kindle and Gitden require the override on heading child elements */
56+
font-family: "M+ 1p", sans-serif !important;
57+
}
58+
59+
/* QUESTION what about nested elements inside code? */
60+
body code, body kbd, body pre, pre :not(code) {
61+
/* !important required to override custom font setting in Kindle / Gitden / Namo */
62+
/* Gitden requires the extra weight of a parent selector */
63+
/* Kindle and Gitden require the override on pre child elements */
64+
font-family: "M+ 1mn", monospace !important;
65+
}
66+
67+
@media amzn-kf8 {
68+
/* Kindle does its own margin management, so don't use an explicit margin */
69+
/*body {
70+
margin: 0 !important;
71+
}*/
72+
73+
/* text-rendering is the only way to enable kerning in Kindle (and Calibre, though it seems to kern automatically) */
74+
/* personally, I think Kindle overdoes kerning, but we're running with it for now */
75+
/* text-rendering: optimizeLegibility kills certain Kindle eInk devices */
76+
/*h1, h2, h3, h4, h5, h6,
77+
body p, li, dd, blockquote > footer,
78+
th, td, figcaption, caption {
79+
text-rendering: optimizeLegibility;
80+
}*/
81+
82+
/* hack line height of subtitle using floats on Kindle */
83+
h1.chapter-title .subtitle {
84+
margin-top: -0.2em;
85+
margin-bottom: 0.3em; /* compensate for reduced line height */
86+
}
87+
88+
/* NOTE using b instead of span since Firefox ePubReader applies immutable styles to span */
89+
h1.chapter-title .subtitle > b {
90+
float: left;
91+
display: inline-block;
92+
margin-bottom: -0.3em; /* reduce the line height */
93+
padding-right: 0.2em; /* spacing between words */
94+
}
95+
96+
h1.chapter-title .subtitle > b:last-child {
97+
padding-right: 0;
98+
}
99+
100+
h1.chapter-title .subtitle::after {
101+
display: table;
102+
content: ' ';
103+
clear: both;
104+
}
105+
}
106+
107+
/* Use darker font colors on Kindle Paperwhite */
108+
@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px),
109+
amzn-kf8 and (device-height: 758px) and (device-width: 1024px) {
110+
body p,
111+
div.abstract > p,
112+
ul, ol, li, dl, dt, dd, footer,
113+
div.verse .attribution, table.table th, table.table td,
114+
figcaption, caption,
115+
h1, h2, h3, h4, h5 {
116+
color: #000000;
117+
}
118+
119+
body a:link,
120+
div.abstract > p a:link {
121+
color: #000000;
122+
-webkit-text-fill-color: #000000;
123+
}
124+
125+
body a:visited {
126+
color: #333332;
127+
-webkit-text-fill-color: #333332;
128+
}
129+
130+
.chapter-header {
131+
color: #191918;
132+
border-bottom-color: #191918;
133+
}
134+
135+
h1.chapter-title .subtitle,
136+
.chapter-header p.byline {
137+
color: #000000;
138+
}
139+
}
140+
141+
.chapter-header p.byline {
142+
height: auto; /* Aldiko requires this value to be 0; reset it for all others */
143+
}
144+
145+
/* Font-based icons */
146+
.icon {
147+
display: inline-block;
148+
/* !important required to override custom font setting in Kindle (since .icon can appear inside a span) */
149+
font-family: "FontAwesome" !important;
150+
font-style: normal !important;
151+
font-weight: normal !important;
152+
line-height: 1;
153+
}
154+
155+
.icon-1_5x {
156+
padding: 0 0.25em;
157+
-webkit-transform: scale(1.5, 1.5);
158+
transform: scale(1.5, 1.5);
159+
}
160+
161+
.icon-2x {
162+
padding: 0 0.5em;
163+
-webkit-transform: scale(2, 2);
164+
transform: scale(2, 2);
165+
}
166+
167+
.icon-small {
168+
font-size: 0.85em;
169+
vertical-align: 0.075em;
170+
}
171+
172+
.icon-1_5em {
173+
font-size: 1.5em;
174+
}
175+
176+
.icon-2em {
177+
font-size: 2em;
178+
}
179+
180+
.icon-3em {
181+
font-size: 3em;
182+
}
183+
184+
.icon-4em {
185+
font-size: 4em;
186+
}
187+
188+
.icon-rotate-90 {
189+
-webkit-transform: rotate(90deg);
190+
transform: rotate(90deg);
191+
}
192+
193+
.icon-rotate-90i {
194+
-webkit-transform: scale(-1, 1) rotate(90deg);
195+
transform: scale(-1, 1) rotate(90deg);
196+
}
197+
198+
.icon-rotate-180 {
199+
-webkit-transform: rotate(180deg);
200+
transform: rotate(180deg);
201+
}
202+
203+
.icon-rotate-180i {
204+
-webkit-transform: scale(-1, 1) rotate(180deg);
205+
transform: scale(-1, 1) rotate(180deg);
206+
}
207+
208+
.icon-rotate-270 {
209+
-webkit-transform: rotate(270deg);
210+
transform: rotate(270deg);
211+
}
212+
213+
.icon-rotate-270i {
214+
-webkit-transform: scale(-1, 1) rotate(270deg);
215+
transform: scale(-1, 1) rotate(270deg);
216+
}
217+
218+
.icon-flip-h {
219+
-webkit-transform: scale(-1, 1);
220+
transform: scale(-1, 1);
221+
}
222+
223+
.icon-flip-v {
224+
-webkit-transform: scale(1, -1);
225+
transform: scale(1, -1);
226+
}

‎docs/styles/epub3-fonts.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@font-face {
2+
font-family: "Noto Serif";
3+
font-style: normal;
4+
font-weight: normal;
5+
src: url(../fonts/notoserif-regular-latin.ttf);
6+
}
7+
8+
@font-face {
9+
font-family: "Noto Serif";
10+
font-style: italic;
11+
font-weight: normal;
12+
src: url(../fonts/notoserif-italic-latin.ttf);
13+
}
14+
15+
@font-face {
16+
font-family: "Noto Serif";
17+
font-style: normal;
18+
font-weight: bold;
19+
src: url(../fonts/notoserif-bold-latin.ttf);
20+
}
21+
22+
@font-face {
23+
font-family: "Noto Serif";
24+
font-style: italic;
25+
font-weight: bold;
26+
src: url(../fonts/notoserif-bolditalic-latin.ttf);
27+
}
28+
29+
/* NOTE: use numeric font weights for M+ 1p since we're using weight variations */
30+
@font-face {
31+
font-family: "M+ 1p";
32+
font-style: normal;
33+
font-weight: 400;
34+
src: url(../fonts/mplus1p-regular-latin.ttf);
35+
}
36+
37+
@font-face {
38+
font-family: "M+ 1p";
39+
font-style: normal;
40+
font-weight: 200;
41+
src: url(../fonts/mplus1p-light-latin.ttf);
42+
}
43+
44+
@font-face {
45+
font-family: "M+ 1p";
46+
font-style: normal;
47+
font-weight: 700;
48+
src: url(../fonts/mplus1p-bold-latin.ttf);
49+
}
50+
51+
@font-face {
52+
font-family: "M+ 1mn";
53+
font-style: normal;
54+
font-weight: normal;
55+
src: url(../fonts/mplus1mn-regular-ascii-conums.ttf);
56+
}
57+
58+
@font-face {
59+
font-family: "M+ 1mn";
60+
font-style: italic;
61+
font-weight: normal;
62+
/* actually the M+ 1mn light font repurposed using FontForge to stand-in for Italic */
63+
src: url(../fonts/mplus1mn-italic-ascii.ttf);
64+
}
65+
66+
@font-face {
67+
font-family: "M+ 1mn";
68+
font-style: normal;
69+
font-weight: bold;
70+
/* actually the M+ 1mn medium font repurposed using FontForge to stand-in for Bold */
71+
src: url(../fonts/mplus1mn-bold-ascii.ttf);
72+
}
73+
74+
@font-face {
75+
font-family: "M+ 1mn";
76+
font-style: italic;
77+
font-weight: bold;
78+
/* actually the M+ 1mn bold font repurposed using FontForge to stand-in for Bold Italic */
79+
src: url(../fonts/mplus1mn-bolditalic-ascii.ttf);
80+
}
81+
82+
@font-face {
83+
font-family: "FontAwesome";
84+
font-style: normal;
85+
font-weight: normal;
86+
src: url(../fonts/fontawesome-icons.ttf);
87+
}
88+
89+
@font-face {
90+
font-family: "FontIcons";
91+
font-style: normal;
92+
font-weight: normal;
93+
src: url(../fonts/assorted-icons.ttf);
94+
}

0 commit comments

Comments
 (0)