Custom CSS for Styling Books

Welcome to the Readest Custom CSS guide! This page explains how to use custom CSS to style your reading experience in Readest. Whether you want to adjust fonts, tweak margins, or customize colors, CSS provides a powerful way to personalize your reading environment.

---

What Is Custom CSS?

Custom CSS allows you to define your own styles for books displayed in Readest. By applying CSS rules, you can control how text, images, and other elements in your books are rendered.

Use Cases

• Font Customization: Change the font-family, size, or color.
• Layout Adjustments: Modify margins, line heights, or alignment.
• Theme Styling: Create dark mode, sepia tones, or any custom color scheme.
• Accessibility: Increase contrast or font size for better readability.

---

How to Add Custom CSS

1. Locate the Custom CSS Settings:

   • Open the Readest app.
   • Navigate to Reader > Menu > Font & Layout > Misc > Custom CSS.

2. Write or Paste CSS Code:

   • Add your CSS rules in the provided editor.

3. Apply:

   • The reader should apply your custom styles instantly.

---

CSS Examples

1. Change the Font Family

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'SimSun', sans-serif !important;
}

This rule applies a custom font-family to all text in the book.

---

2. Adjust Margins and Line Height

body {
  margin: 20px;
  line-height: 1.8 !important;
}

This increases the margin around the text and makes the lines more spaced out for a comfortable reading experience.

---

3. Create a Dark Mode Theme

html, body {
  --theme-bg-color: #121212;
  color: #e0e0e0 !important;
}

a:any-link {
  color: #bb86fc !important;
}

This CSS creates a dark mode with light-colored text and highlighted links.

---

4. Highlight Quotes

blockquote {
  color: #555 !important;
  border-left: 5px solid #ccc !important;
  padding-left: 10px !important;
  font-style: italic;
}

This styles blockquotes with a subtle left border and italic text.

---

5. Center Images

img {
  display: block;
  margin: 0 auto !important;
  max-width: 100% !important;
}

This ensures all images are centered and responsive to the screen size.

---

6. Increase Font Size for Accessibility

body {
  font-size: 18px !important;
}

This increases the base font size, making the text easier to read for users with visual impairments.

---

Tips for Writing CSS

• Test Incrementally: Apply changes one at a time to see the effects.
• Use Developer Tools: Use browser dev tools (e.g., Chrome DevTools) to inspect and debug styles.
• Be Specific: Use specific selectors to avoid unintentional changes to other elements.

---

Resetting Styles

If you want to reset your custom CSS:

1. Open the Custom CSS Settings.
2. Clear all code in the editor.

---

Note that by default the custom CSS settings are saved to global settings which apply to all books. You can uncheck the Global Seettings option in the settings dialog.

By using custom CSS, you can make Readest truly yours. Enjoy personalizing your reading experience! If you have any questions or need more examples, feel free to contribute to this wiki or contact the community.