Adder font size is too small on Stack Overflow #4615
Labels
Comments
|
The Angular docs are even worse:
|
|
Related issue: #4248 |
robertknight
added a commit
that referenced
this issue
Aug 23, 2022
Various annotator UI components use rem-based font sizes to try and make the annotator UI match the document. However various sites (eg. Stack Overflow, OpenStax) set the root font size to a value that results in the Hypothesis UI elements having unreadably small or excessively large text. Also for these sites the rem-size doesn't reflect the actual "default" font size of the page as perceived by the user. To resolve this, change the font sizes from using rem units to a value calculated from a `--hypothesis-font-size` CSS variable. This variable is set to match 1rem when that lies in a reasonable range (16-24px) but is clamped to lie within that range otherwise. In future we could change the way the reference point is computed to try and match the "default" font size on the page, if that is not 1rem. Fixes #4615
robertknight
added a commit
that referenced
this issue
Aug 25, 2022
Various annotator UI components use rem-based font sizes to try and make the annotator UI match the document. However various sites (eg. Stack Overflow, OpenStax) set the root font size to a value that results in the Hypothesis UI elements having unreadably small or excessively large text. Also for these sites the rem-size doesn't reflect the actual "default" font size of the page as perceived by the user. To resolve this, change the font sizes from using rem units to a value calculated from a `--hypothesis-font-size` CSS variable. This variable is set to match 1rem, but clamped to ensure that our UI text is always readable. Fixes #4615
robertknight
added a commit
that referenced
this issue
Aug 26, 2022
Various annotator UI components use rem-based font sizes to try and make the annotator UI match the document. However various sites (eg. Stack Overflow, OpenStax) set the root font size to a value that results in the Hypothesis UI elements having unreadably small or excessively large text. Also for these sites the rem-size doesn't reflect the actual "default" font size of the page as perceived by the user. To resolve this, change the font sizes from using rem units to a value calculated from a `--hypothesis-font-size` CSS variable. This variable is set to match 1rem, but clamped to ensure that our UI text is always readable. Fixes #4615
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The font size of the client's adder toolbar is tiny on Stack Overflow (example URL), compared to the text on the page and in the sidebar itself:
The page has a CSS rule that simplifies to
html { font-size: 13px }, and that affects the scale of our adder. You could make a case that they shouldn't set a rule like this and then use a larger font size for the majority of text on the page, but we need to make the client work regardless.The text was updated successfully, but these errors were encountered: