Skip to content

text: Add and use proportionalLetterSpacing #629

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.

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

Merged
merged 4 commits into from
Apr 30, 2024

Conversation

chrisbobbe
Copy link
Collaborator

@chrisbobbe chrisbobbe commented Apr 24, 2024

This could be helpful for #548, but I'm sending it now so we can see if we like the logic and want to reuse it for that. It does make a small adjustment to some letter spacing, to better follow the user's device-level text size setting, so I'll post some screenshots.

@chrisbobbe chrisbobbe added the a-design Visual and UX design label Apr 24, 2024
@chrisbobbe chrisbobbe requested a review from gnprice April 24, 2024 20:23
@chrisbobbe
Copy link
Collaborator Author

Before After
EF238594-937F-4703-8D0B-8049472DF677 76FCBDD0-9BD3-41CC-9385-2A5D587D0457
8CFED067-CF29-43CC-B9DF-8FD558B252A7 A0FA20FC-9A54-4854-9A2B-B820AF1F5F2A
107AA3B7-BA63-49AE-9DBF-F61E9527305D 3D8222EF-7172-4981-9600-A02203FA6E98
3F3FBCB9-6B86-40DC-A65C-1805E8C09B50 F56C0324-9AB3-4298-8AC1-36C3C5487913

Copy link
Member

@gnprice gnprice left a comment

Choose a reason for hiding this comment

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

Thanks! LGTM; one suggestion below. Please go ahead and merge when ready.

}

// From trying the options on an iPhone 13 Pro running iOS 16.6.1:
const textScaleFactors = <double>[
Copy link
Member

Choose a reason for hiding this comment

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

In the tests, the `textScaleFactors` list is copied from
emoji_reaction_test. Perhaps there's a convenient place to define it
centrally.

I think probably most convenient would be to put it at the top level of this file text_test.dart, and then emoji_reaction_test.dart can import from there.

It feels slightly messy to have one file be importing from another file that has its own main function; but it works fine, and it makes a low-fuss solution here.

This is now the natural thing to do for tooltipTheme, following
recommendations in the upstream docs (thanks to my PR
flutter/flutter#135879!) and doesn't need an explicit comment
explaining it.
To confirm that [TextStyle.letterSpacing] is taken literally as
logical pixels, as its dartdoc suggests it is, I rendered the text
"||" with an extreme [TextStyle.letterSpacing] value of 40. Then it
was easy to see that the letter spacing -- the horizontal distance
between the two "|" characters -- wasn't changing as I adjusted the
text-size slider in my iPhone settings.

In the tests, the `textScaleFactors` list is copied from
emoji_reaction_test. Perhaps there's a convenient place to define it
centrally.
…ant it

The letter spacings in these pieces of text hasn't been responding
to system font-size adjustments. Now they do.

There might not be any other instances of this problem in the app,
because we widely apply 0 for [TextStyle.letterSpacing] (since
0065954), and when we do that, it shouldn't matter whether zero is
considered as logical pixels or as a proportion the surrounding text
size.
@chrisbobbe chrisbobbe force-pushed the pr-proportional-letter-spacing branch from bb5e0e9 to 70ca30d Compare April 30, 2024 00:57
@chrisbobbe chrisbobbe merged commit 74aa25d into zulip:main Apr 30, 2024
chrisbobbe added a commit that referenced this pull request Apr 30, 2024
@chrisbobbe chrisbobbe deleted the pr-proportional-letter-spacing branch April 30, 2024 01:03
@chrisbobbe
Copy link
Collaborator Author

Thanks! Done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-design Visual and UX design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants