Archives
/
koreader
mirror of https://github.com/koreader/koreader
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated Vignettes around chapter titles (markdown)

master
mergen3107 11 months ago
parent 0b36dce74a
commit e703a492c3
1 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File

69
Vignettes-around-chapter-titles.md
Unescape Escape

@ -6,86 +6,81 @@ The generic form (without images) looks like this:
/* Vignettes around chapter titles in KOReader. */ /* Vignettes around chapter titles in KOReader. */
/* Created by mergen3107 on KOReader GitHub community. */ /* Created by mergen3107 on KOReader GitHub community. */
/* ! Applying this CSS file might reduce rendering performance. */ /* ! Applying this CSS file might reduce rendering performance. */
/* Especially beware making this style tweak "Apply to all books". */ /* ! Especially beware making this style tweak "Apply to all books". */
/* For easier navigation, turn off Word Wrap in your text viewer. */ /* For easier navigation, turn off Word Wrap in your text viewer. */
/* All vignettes images are encoded as Base64 strings.*/ /* All vignettes images are encoded as Base64 strings.*/
/* Make sure to follow the syntax strictly (white space after comma is on purpose): */ /* Make sure to follow the syntax strictly: */
/* background-image: url(data:image/png;base64, BASE64_STRING_HERE); */ /* background-image: url(data:image/png;base64,BASE64_STRING_HERE); */
/* Level 1 chapter titles */ /* Level 1 chapter titles */
h1::before, section title p::before { h1::before, section title p::before {
content: "\A0"; /* otherwise it doesn't show */
display: block; display: block;
background-image: url(data:image/png;base64, BASE64_STRING_HERE); background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */ background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
content: "‎"; /* otherwise it doesn't show */ padding: 0.75em 0;
font-family: "FreeSans"; /* to remove the weird arrow symbol */ margin: 0.25em 0;
padding: 0.5em 0;
margin: 0.5em 0;
} }
h1::after, section title p::after { h1::after, section title p::after {
content: "\A0"; /* otherwise it doesn't show */
display: block; display: block;
background-image: url(data:image/png;base64, BASE64_STRING_HERE); background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */ background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
content: "‎"; /* otherwise it doesn't show */ /* font-family: "FreeSans"; /* to remove the weird arrow symbol */
font-family: "FreeSans"; /* to remove the weird arrow symbol */ padding: 0.75em 0;
padding: 0.5em 0; margin: 0.25em 0;
margin: 0.5em 0;
} }
/* Level 2 chapter titles */ /* Level 2 chapter titles */
h2::before, section section title p::before { h2::before, section section title p::before {
display: block;BASE64_STRING_HERE content: "\A0"; /* otherwise it doesn't show */
background-image: url(data:image/png;base64, BASE64_STRING_HERE); display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */ background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.25em 0; padding: 0.25em 0;
margin: 0.25em 0; margin: 0.75em 0;
} }
h2::after, section section title p::after { h2::after, section section title p::after {
content: "\A0"; /* otherwise it doesn't show */
display: block; display: block;
background-image: url(data:image/png;base64, BASE64_STRING_HERE); background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */ background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
content: "‎"; /* otherwise it doesn't show */ padding: 0.15em 0;
font-family: "FreeSans"; /* to remove the weird arrow symbol */ margin: 0.75em 0;
padding: 0.25em 0;
margin: 0.25em 0;
} }
/* Level 3 chapter titles */ /* Level 3 chapter titles */
h3::before, section section section title p::before { h3::before, section section section title p::before {
content: "\A0"; /* otherwise it doesn't show */
display: block; display: block;
background-image: url(data:image/png;base64, BASE64_STRING_HERE); background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */ background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
content: "‎"; /* otherwise it doesn't show */ padding: 0.15em 0;
font-family: "FreeSans"; /* to remove the weird arrow symbol */ margin: 0.25em 0;
padding: 0.05em 0;
margin: 0.1em 0;
} }
h3::after, section section section title p::after { h3::after, section section section title p::after {
content: "\A0"; /* otherwise it doesn't show */
display: block; display: block;
background-image: url(data:image/png;base64, BASE64_STRING_HERE); background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */ background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
content: "‎"; /* otherwise it doesn't show */ padding: 0.15em 0;
font-family: "FreeSans"; /* to remove the weird arrow symbol */ margin: 0.25em 0;
padding: 0.05em 0;
margin: 0.1em 0;
} }
``` ```
Replace each `BASE64_STRING_HERE` with the string of conversion of an image to Base64 encoding. Replace each `BASE64_STRING_HERE` with the string of conversion of an image to Base64 encoding.
@ -96,10 +91,10 @@ Then enable it from Top Menu - Second tab - Style Tweaks - User Style Tweaks.
In this example, vignettes are drawn only around h1/h2/h3 chapter titles in epub books and their respective equivalents in fb2 books. In this example, vignettes are drawn only around h1/h2/h3 chapter titles in epub books and their respective equivalents in fb2 books.
(!) For books with many chapters this style tweak might severely reduce each opening of the document. **(!) For books with many chapters this style tweak might severely reduce each opening of the document.**
Especially beware enabling this tweak to "Apply to all books". **Especially beware enabling this tweak to "Apply to all books".**
Here is an example of using such vignettes: Here is an example of using such vignettes:
[KOReader_Vignettes.zip](https://disk.yandex.com/d/zI2cZ_4TUZAk3w) [_vignettes2.css](https://disk.yandex.com/d/FolUzBpduooqZw)
![Screenshot_20230701-133823](https://github.com/koreader/koreader/assets/6279855/36d4176d-b5eb-4340-9926-4a04f7c23096) ![Screenshot_20230701-133823](https://github.com/koreader/koreader/assets/6279855/36d4176d-b5eb-4340-9926-4a04f7c23096)
Write Preview
Loading…
Cancel
Save