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. */
/* Created by mergen3107 on KOReader GitHub community. */
/* ! 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. */
/* All vignettes images are encoded as Base64 strings.*/
/* Make sure to follow the syntax strictly (white space after comma is on purpose): */
/* background-image: url(data:image/png;base64, BASE64_STRING_HERE); */
/* Make sure to follow the syntax strictly: */
/* background-image: url(data:image/png;base64,BASE64_STRING_HERE); */
/* Level 1 chapter titles */
h1::before, section title p::before {
content: "\A0"; /* otherwise it doesn't show */
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-repeat: no-repeat;
background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.5em 0;
margin: 0.5em 0;
padding: 0.75em 0;
margin: 0.25em 0;
}
h1::after, section title p::after {
content: "\A0"; /* otherwise it doesn't show */
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-repeat: no-repeat;
background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.5em 0;
margin: 0.5em 0;
/* font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.75em 0;
margin: 0.25em 0;
}
/* Level 2 chapter titles */
h2::before, section section title p::before {
display: block;BASE64_STRING_HERE
background-image: url(data:image/png;base64, BASE64_STRING_HERE);
content: "\A0"; /* otherwise it doesn't show */
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-repeat: no-repeat;
background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.25em 0;
margin: 0.25em 0;
margin: 0.75em 0;
}
h2::after, section section title p::after {
content: "\A0"; /* otherwise it doesn't show */
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-repeat: no-repeat;
background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.25em 0;
margin: 0.25em 0;
padding: 0.15em 0;
margin: 0.75em 0;
}
/* Level 3 chapter titles */
h3::before, section section section title p::before {
content: "\A0"; /* otherwise it doesn't show */
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-repeat: no-repeat;
background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.05em 0;
margin: 0.1em 0;
padding: 0.15em 0;
margin: 0.25em 0;
}
h3::after, section section section title p::after {
content: "\A0"; /* otherwise it doesn't show */
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-repeat: no-repeat;
background-position: center;
content: "‎"; /* otherwise it doesn't show */
font-family: "FreeSans"; /* to remove the weird arrow symbol */
padding: 0.05em 0;
margin: 0.1em 0;
padding: 0.15em 0;
margin: 0.25em 0;
}
```
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.
(!) 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".
**(!) 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".**
Here is an example of using such vignettes:
[KOReader_Vignettes.zip](https://disk.yandex.com/d/zI2cZ_4TUZAk3w)
Here is an example of using such vignettes:
[_vignettes2.css](https://disk.yandex.com/d/FolUzBpduooqZw)
![Screenshot_20230701-133823](https://github.com/koreader/koreader/assets/6279855/36d4176d-b5eb-4340-9926-4a04f7c23096)
Write Preview
Loading…
Cancel
Save