Skip to content
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

CSS in HTML template: adjust #TOC and h1 on mobile #7835

Merged
merged 1 commit into from
Jan 16, 2022
Merged

CSS in HTML template: adjust #TOC and h1 on mobile #7835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 9 additions & 0 deletions data/templates/styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the default for this - or does it vary with the browser?
Also what is the default for h2, h3, etc.?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My specific worry is that if you set the h1 font-size to 1.8, it will be indistinguishable from h2. Maybe we should explicitly set all hN font sizes, using some kind of harmonious scheme?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, my own aesthetics prefer much smaller headings (more like what you get in print articles). However, then you have some difficulty distinguishing 5 or 6 heading levels. It can perhaps still be done by not using bold fonts for all of them.

Copy link
Collaborator Author

@mb21 mb21 Jan 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Different browsers used to have different values for this, but nowadays this is all standardized. I just tested Chrome, Firefox and Safari on macOS and all set the h1 to 2em. With 1em being 16px in modern browsers, this would be 32px, but we define 1em on desktop-sized screens with html { font-size: 20px}, so in this stylesheet it's 40px.

Maybe we should explicitly set all hN font sizes, using some kind of harmonious scheme?

yes, that's what people used to do (and had to do due to browser differences). My idea with this stylesheet was to rely on browser defaults as much as possible, to keep it small. And I think it worked out pretty well generally... except that the h1 is too big on mobile :P But arguably it's not too bad and we can also just leave it...

My specific worry is that if you set the h1 font-size to 1.8, it will be indistinguishable from h2

That would be bad indeed, but I tested it and it works out like this: We have:

@media (max-width: 600px) {
  body {
    font-size: 0.9em;

so on mobile, 1em is actually 20px * 0.9 = 18px. Thus:

h2 is 1.5em (by browser default) -> 27px.
If we set h1 to 1.8em -> 32.4px.

(you can confirm these pixel values by looking at the "calculated" tab in the browser's dev tools when having an h1/h2 element selected)

Copy link
Collaborator Author

@mb21 mb21 Jan 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

then you have some difficulty distinguishing 5 or 6 heading levels. It can perhaps still be done by not using bold fonts for all of them.

we already do that, because with browser defaults for some reason, h5 and h6 are smaller than 1em, so we set them to 1em.

h4, h5, h6 and paragraph text all are 20px, but:

Screenshot 2022-01-15 at 09 15 48

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, this sounds reasonable then!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great, I updated the tests...

}
}
@media print {
body {
Expand Down Expand Up @@ -148,6 +151,12 @@
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
Expand Down
9 changes: 9 additions & 0 deletions test/lhs-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
Expand Down Expand Up @@ -134,6 +137,12 @@
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
Expand Down
9 changes: 9 additions & 0 deletions test/lhs-test.html+lhs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
Expand Down Expand Up @@ -134,6 +137,12 @@
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
Expand Down
9 changes: 9 additions & 0 deletions test/writer.html4
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
Expand Down Expand Up @@ -137,6 +140,12 @@
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
Expand Down
9 changes: 9 additions & 0 deletions test/writer.html5
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
Expand Down Expand Up @@ -137,6 +140,12 @@
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
Expand Down