Skip to content

Add HTML reading options #2951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ascholerChemeketa wants to merge 14 commits into from
Closed

Add HTML reading options #2951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5fb1192
Localization: add reading options strings
ascholerChemeketa Jun 19, 2026
404b56e
JS: factor out pretext-dialog from pretext_add_on
ascholerChemeketa Jun 19, 2026
ab19d07
HTML: add readability settings dialog in place of light/dark switch
ascholerChemeketa Jun 19, 2026
2d80f29
CSS: styling for readability options
ascholerChemeketa Jun 19, 2026
f2aeb48
CSS: adjust PTXDialog heading font
ascholerChemeketa Jun 19, 2026
29f6590
JS: add readability-options.js and move dark/light code to it
ascholerChemeketa Jun 19, 2026
00ababe
HTML: add line height readability option
ascholerChemeketa Jun 19, 2026
1208dfe
CSS/JS: add line height readability option
ascholerChemeketa Jun 19, 2026
3a5237c
HTML: add font size readability option
ascholerChemeketa Jun 19, 2026
0fd90e2
CSS/JS: add font size readability option
ascholerChemeketa Jun 19, 2026
1d6330a
HTML: add permalink accessibility readability option
ascholerChemeketa Jun 19, 2026
866f8d4
CSS/JS: add permalink accessibility readability option
ascholerChemeketa Jun 19, 2026
b965e59
HTML: permalinks are invisible to screenreaders by default
ascholerChemeketa Jun 19, 2026
7047d2a
Common: update reserved id list for readability options
ascholerChemeketa Jun 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/components/elements/_misc-content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ article.theorem-like .emphasis {
}

.para {
line-height: 1.35;
line-height: var(--ptx-content-line-height, 1.35);
}

.hidden {
Expand Down
5 changes: 5 additions & 0 deletions css/components/helpers/_dialogs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ $border-radius: 0 !default;
min-height: 15px;
user-select: none;
}

.heading:is(h2) {
font-size: 1.5em;
margin: 0.5em 0;
}
}

@mixin ptx-dialog-modal {
Expand Down
2 changes: 1 addition & 1 deletion css/components/interactives/_sagecell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

.sagecell_evalButton {
font-family: var(--font-body);
font-size: 16px;
font-size: 1rem;
padding: 0 0.65em;
}

Expand Down
4 changes: 3 additions & 1 deletion css/components/page-parts/_body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ body {
.ptx-main .ptx-content {
max-width: $content-with-padding-width; // bad for worksheets
padding: 24px $content-side-padding 60px;
line-height: var(--ptx-content-line-height, normal);
font-size: var(--ptx-content-font-size, inherit);

@if $centered-content {
margin-left: auto;
Expand All @@ -76,7 +78,7 @@ body.pretext,
body.standalone {
margin: 0;
padding: 0;
font-size: 16px;
font-size: 1rem;
background: var(--page-color, white);
}

Expand Down
75 changes: 73 additions & 2 deletions css/components/page-parts/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,70 @@ $center-content: true !default;
}
}

.ptx-readability-options-popup {
padding: 10px;
margin-top: $nav-height;
min-width: 16rem;
max-width: 600px;
margin-bottom: 0.5em;
width: 90%;

@include dialogs.ptx-dialog-modal;
}

.ptx-readability-options-popup-controls {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5em;
border-bottom: 1px solid var(--dialog-border-color);
}

.ptx-readability-options-group {
margin: 0;
display: flex;
flex-wrap: wrap;
max-width: 100%;
row-gap: 0.5em;
column-gap: 35px;

label {
display: flex;
gap: 0.5em;
align-items: center;
padding-top: 0.4em;
flex-basis: 100%; // default to full line
justify-content: flex-start;
}

input[type="range"] {
flex: 1;
}

& + .ptx-readability-options-group:not(fieldset) {
margin-top: 1.25em;
}
}

.ptx-readability-options-group:is(fieldset) {
margin-top: 1.5em;
padding: 0.5em 0.75em 0.75em;
border: 0;
border-top: 1px solid var(--dialog-border-color);
border-bottom: 1px solid var(--dialog-border-color);
}

.ptx-readability-options-group-theme {
label {
flex-basis: auto; // allow radio buttons to sit next to each other
}
}

.ptx-readability-slider-label {
justify-content: space-between;
}

.treebuttons > * {
display: flex;
align-items: center;
Expand All @@ -109,7 +173,7 @@ $center-content: true !default;
display: none;
}

:is(.runestone-profile, .activecode-toggle, .ptx-search-button, .ptx-calculator-toggle, .light-dark-button, .ptx-embed-button) .name {
:is(.runestone-profile, .activecode-toggle, .ptx-search-button, .ptx-calculator-toggle, .ptx-embed-button, .ptx-readability-options-button) .name {
@include accessibility.sr-only;
}

Expand Down Expand Up @@ -186,12 +250,19 @@ $center-content: true !default;
bottom: $nav-height;
}

.ptx-readability-options-popup {
margin-top: unset;
margin-bottom: 0;
top: auto;
bottom: $nav-height;
}

.dropdown-content {
top: unset;
bottom: $nav-height;
}

:is(.toc-toggle, .previous-button, .up-button, .next-button, .ptx-calculator-toggle, .index-button, .ptx-embed-button) .name {
:is(.toc-toggle, .previous-button, .up-button, .next-button, .ptx-calculator-toggle, .index-button, .ptx-embed-button, .ptx-readability-options-button) .name {
display: none;
}
}
Expand Down
Loading