Frontend responsive fontsize android #3623
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
from
46039ca to
e8ddfec
Compare
|
Will eventually replace #2699 |
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
4 times, most recently
from
c2d1d9e to
d5518bc
Compare
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
4 times, most recently
from
933d69a to
fab6678
Compare
In order to change the CSS to change the codebase to use rem, using 'The 62.5% Font Size Trick' we need to first convert all existing rem units back to px. This is so that we don't accidentally already have rem values. If the default base font size is 16px, 1rem equals 16px. Changing back to pixel first makes it much easier to use the 62.5% trick where 1rem = 10px. This refactoring should not introduce any visual change and just converted rem to px. I.e. 1.5rem is now 24px as 1rem currently equals 16px. Also simplified terms.module.css a bit as the title was defined multiple times.
Set html { font-size: 62.5%; } to make 1rem = 10px for easier
responsive calculations. Convert all hardcoded px font-sizes to rem
units throughout the codebase.
This enables easier responsive font scaling by allowing components
to scale proportionally when the root font-size changes for different
screen sizes or user preferences.
Conversions:
- 10px → 1.0rem
- 11px → 1.1rem
- 12px → 1.2rem
- 14px → 1.4rem
- 16px → 1.6rem
- 18px → 1.8rem
- 19px → 1.9rem
- 20px → 2.0rem
- 22px → 2.2rem
- 24px → 2.4rem
- 32px → 3.2rem
- 35px → 3.5rem
This follows the standard '62.5% Font Size Trick' pattern where
setting the root font-size to 62.5% (of browser default 16px) makes
1rem equal to 10px, simplifying rem-to-pixel mental math.
The last commits introduced the '62.5% Font Size Trick' which almost worked perfectly, except for components that do not set font-size at all and inherit from the base font-size of the parent. These components now render with small 10px font-size instead of 16px. Fixed by changing the app style (most outer parent class) to 1.6rem which equals to 16px, so all components that do not define font-size inherit 16px.
Android textZoom only increases font-size without incresing surrounding elements which can break the layout and cause overlapping text and elements. This commit reads the current textzoom, sets a custom CSS base font size (calculated from textzoom) and resets textzoom to 100%. The custom CSS is using 'The 62.5% Font Size Trick' with which 1rem equals 10px. With this it is possible to change elment dimensions from px to rem. These elements will become responsive and also grow if Android settings for font size is increased. To simulate this in webdev and optimize the layout for increased fontsize a base font size of 125% has to be set.
Bottom-menu should not grow beyond certain size in responsive mode for example if Android Font size is set to max. This can be simulated by changing the font-size on the root HTML element to 150%.
Toggles in responsive mode looked broken if Android Font size is increased. This can be simulated by changing the font-size on the root HTML element to 150%.
- changed button border-width to be reponsive and scale with the ui - fixed send/recieve button, should scale - fixed responsive button height
Radio buttons should render large if Font size is increased to improve accessibility.
Fixed a bug caused by empy paragraph element, which increased settings item height unnecessarily.
Improved various form elements mostly related to Send view. Can be tested by setting font-size: 150%; on the html element.
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
from
fab6678 to
044e95e
Compare
Merged
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
from
044e95e to
4ca695a
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Before asking for reviews, here is a check list of the most common things you might need to consider: