Padding Type layout for epub, xhtml and txt

[zeoint]

Type of reader (if reader related)

epub

Description of the new feature / enhancement

Reference For The Requested Feature - Padding Type Layout

---

1. For this type of layout there should be six new buttons / values in epub reader settings,

• Border Line Thickness (Value or Slider)
• Border Line Color
• Border Inside & Outside BG Color
• Border Padding Left & Right (Border line should only be on the left and right side. Top and bottom border is unnecessary).

2. The border line should respect the border padding left and right value while Increasing / Decreasing Font Size and width.

https://github.com/mienaiyami/yomikiru/assets/127277950/13f3c034-fb7d-440b-9867-8b4a79bb47fe

3. Sample / Reference Image Of Reader Settings,

---

Scenario when this would be used?

For reading epubs, xhtml with lesser eye strain. That layout also looks good.

Supporting information

I copied hex value of the colors used on the website and applied the same in yomikiru, but without the border and border outside bg color, it does not feel right.

[github-actions[bot]]

Thank you for your feedback and suggestions. Please note that the author might only respond on weekends, so we kindly ask for your patience and understanding.

[zeoint]

Only when the padding style is enabled the below 6 buttons should be editable, otherwise uneditable. Like color filters in image reader settings. Only when 'use color filters' button is enabled its below related options are editable.

[mienaiyami]

Will be adding it as low priority, so might take a long time before its implemented.

But you can use this css as temporary solution.

body #app #EPubReader section.main>.cont{ 
    border: 1px solid;
    border-color: red;
    padding-left:40px;
    padding-right:40px;
    background-color: grey;
}

add this to your existing custom .css file or create a new custom.css file with this text inside, and then set it using settings. Feel free to ask for help in setup.

[mienaiyami]

If you want to use background color from the reader setting, then do this.

#EPubReader > section{
   background:var(--body-bg-color);
}
body #app #EPubReader section.main>.cont{ 
    border: 1px solid;
    border-color: red;
    padding-left:40px;
    padding-right:40px;
}

and if you want border color to be same as font color replace with this

border-color: var(--epub-font-color);

[zeoint]

Cool, thanks. When you implement this, please remove the top and bottom margins as they are unnecessary. The left and right borders should touch the topbar and bottom of the page.

---

[zeoint]

A couple reminders for the purpose of clarity,

• Enabling padding style should freeze the above background, font color buttons and un-freeze the padding style's 7 related buttons.
• Disabling padding style should freeze its 7 related buttons and un-freeze the above bg, font color.
• This is for ease of access when switching between those two layouts.

[omodia]

Nice Layout.