Add responsive font sizes #33543
Closed
Add responsive font sizes #33543
Conversation
This file contains 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
|
Size Change: +369 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
ntsekouras
reviewed
Jul 19, 2021
| const minMaxRate = '8vw'; | ||
| const slope = '0'; | ||
| const space = '\\s*'; | ||
| const valueRefex = new RegExp( |
There was a problem hiding this comment.
I guess this should be valueRegex? 😄
mtias
reviewed
Jul 19, 2021
| const minFontSize = '12px'; | ||
| const valueMatcher = '(?<val>[0-9\\.]*[a-z%]*)'; | ||
| const valuePlaceholder = '\\k<val>'; | ||
| const minMaxRate = '8vw'; |
There was a problem hiding this comment.
we need to consider which ones we'd want to express as attributes without UI so they can be changed by patterns for finer control
There was a problem hiding this comment.
When we introduce these attributes, we'll be introducing new things to support (bc) and things we can't revisit. I personally feel it's wiser to do it in the other direction. Meaning build a UI to tweak some of these values but store it like today (custom values), validate that it's the kind of customization we want and then split the attribute.
Alternatively, we should find a way to mark blocks/patterns using this new attribute format as something very experimental that can potentially break in the future.
mtias
reviewed
Jul 19, 2021
| @@ -18,11 +18,32 @@ import RangeControl from '../range-control'; | |||
| import { default as UnitControl, useCustomUnits } from '../unit-control'; | |||
| import CustomSelectControl from '../custom-select-control'; | |||
| import { VisuallyHidden } from '../visually-hidden'; | |||
| import CheckboxControl from '../checkbox-control'; | |||
There was a problem hiding this comment.
I'd like to try making this a default for font-sizes above a given threshold and maybe opt-in for em/rem.
There was a problem hiding this comment.
There's a lot of variation depending on device size, but generally I've found that font sizes that are 64px and above tend to break poorly on small screens. Maybe we use that as a threshold and see how it feels?
There was a problem hiding this comment.
Yes, that'd be a reasonable start, I think.
annezazu
added
[Type] Enhancement
kjellr
reviewed
Aug 2, 2021
| ); | ||
|
|
||
| function clampValue( value ) { | ||
| return `clamp( calc( ${ minFontSize } - ( ( ${ minFontSize } - ${ value } ) * ${ slope } ) ) , ${ value } , calc( calc( ${ minFontSize } + ${ minMaxRate } ) + ( ( ${ value } - calc( ${ minFontSize } + ${ minMaxRate } ) ) * ${ slope } ) ) )`; |
There was a problem hiding this comment.
@youknowriad I'm having trouble wrapping my head around each part of these equations. Would you mind annotating this a little more? Or if you can point me to a reference/purpose for the slope value here that'd be helpful too. That's the part I'm getting tripped up on.
There was a problem hiding this comment.
It is based on this exploration https://observablehq.com/@eeeps/modulating-input-font-sizes we'll definitely need more inline documentation about this.
There was a problem hiding this comment.
That's really helpful, especially the visualization. Thank you!
oandregal
added
the
[Feature] Design Tools
|
I'd love to pick this back up. Can we add a generic |
|
Hi, I have applied responsive fonts in the mobile version of a project, where the font size is a function of the size of the title of product.
It will be great if you can incorporate it in to your project, also considering the cases of "load more", "infinite scroll" implementations of lists that required additional theme customizations. Will be happy to share my plugin |
10 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Just experimenting with opinionated responsive font sizes.