aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-02-19 22:14:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add paragraph alignment setting

Browse Source 
- Add paragraphAlignment setting (left/justify) to UserSettings interface
- Add UI control with icon buttons in ReadingDisplaySettings
- Apply alignment via CSS variable to reader content and preview
- Default to left-aligned to maintain current behavior
- Keep headings always left-aligned for better readability
This commit is contained in:
Gigi
2025-10-15 17:43:31 +02:00
parent e38237ca8e
commit e2c712033f
6 changed files with 46 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/styles/components/reader.css
View File

@@ -37,9 +37,22 @@
.highlight-indicator svg { font-size: 0.875rem; }
.reader-html { color: var(--color-text); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
.reader-markdown { color: var(--color-text); line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
/* Ensure content is left-aligned even if source markup uses center */
.reader .reader-html *, .reader .reader-markdown * { text-align: left !important; font-family: inherit !important; }
.reader center, .reader [align="center"] { text-align: left !important; }
/* Ensure font inheritance */
.reader .reader-html *, .reader .reader-markdown * { font-family: inherit !important; }
/* Apply paragraph alignment from settings */
.reader .reader-html p,
.reader .reader-markdown p,
.reader .reader-html div,
.reader .reader-markdown div,
.reader .reader-html li,
.reader .reader-markdown li,
.reader .reader-html blockquote,
.reader .reader-markdown blockquote { text-align: var(--paragraph-alignment, left); }
/* Override centered content with user preference */
.reader center, .reader [align="center"] { text-align: var(--paragraph-alignment, left) !important; }
/* Keep headings left-aligned */
.reader .reader-html h1, .reader .reader-html h2, .reader .reader-html h3, .reader .reader-html h4, .reader .reader-html h5, .reader .reader-html h6,
.reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; }
/* Tame images from external content */
.reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
/* Headlines with Tailwind typography */