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

Jump to bottom

Add --font-weight-bold and set previous bold to 601 #24307

Merged
merged 6 commits into from
Apr 24, 2023
Merged

Add --font-weight-bold and set previous bold to 601 #24307

merged 6 commits into from
Apr 24, 2023

Conversation

wxiaoguang
Copy link
Contributor

Fix #24305

According to MDN, "bold" starts from 700, some fonts do not provide "bolding" for weight 600

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

@GiteaBot GiteaBot added this to the 1.20.0 milestone Apr 24, 2023
@pull-request-size pull-request-size bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Apr 24, 2023
@wxiaoguang wxiaoguang mentioned this pull request Apr 24, 2023
Closed
@silverwind
Copy link
Member

Personally, I use 500 or 600 for semi-bold mostly these days. On Mac, these render sufficiently bold. 700 seems excessive.

Would suggest adding a CSS variable for it --font-weight-bold: bold.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 24, 2023
@wxiaoguang
Copy link
Contributor Author

wxiaoguang commented Apr 24, 2023 •
edited
Loading

Would you take this PR? I am open (I am not sure about how to satisfy all users, but some fonts don't work with 600)

Actually bold seems safer for all fonts and browsers.

@wxiaoguang
Copy link
Contributor Author

As according to #24305 (comment), maybe we can use 610 ?

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Apr 24, 2023
@silverwind
Copy link
Member

Let's wait on response for #24305 (comment). Maybe we need to do some kind of detection and if a semi-bold is available, use that. 700 or bold seems too bold for my tastes.

@silverwind
Copy link
Member

Would you take this PR? I am open (I am not sure about how to satisfy all users, but some fonts don't work with 600)

Actually bold seems safer for all fonts and browsers.

You can put the variable, we can then tune later.

@pull-request-size pull-request-size bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Apr 24, 2023
@wxiaoguang
Copy link
Contributor Author

You can put the variable, we can then tune later.

Done, feel free to edit and fine tune.

@silverwind
Copy link
Member

silverwind commented Apr 24, 2023 •
edited
Loading

So, bold is an alias to 700. I think there is no way around using it to ensure all platforms can show distinct 700 vs 400, and I think CSS unfortunately offers no way to fine-tune for platforms that support intermediate thickness inbetween, e.g. I would prefer 600 if it is available and distinct from 700.

@wxiaoguang wxiaoguang changed the title Use font-weight: bold instead of 600 Use font-weight var instead of 600 Apr 24, 2023
@wxiaoguang
Copy link
Contributor Author

In the latest commit I used 610, what do you think about it? I guess it could satisfy most users.

@silverwind
Copy link
Member

silverwind commented Apr 24, 2023 •
edited
Loading

Ah, I see, so if 610 works, it does sound like a good compromise. Results in my machine:

Screenshot 2023-04-24 at 17 43 49

It does look like 610 renders more like 500 than 600 for me.

@wxiaoguang
Copy link
Contributor Author

wxiaoguang commented Apr 24, 2023 •
edited
Loading

It does look like 610 renders more like 500 than 600 for me.

Noooo .... because the 1 is different from 0, that's not mono-font.

610 is definitely slightly larger than 600

So you need to render the same text to see the difference.

@silverwind
Copy link
Member

Ah, yes, it's a visual deception :D

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 24, 2023
@silverwind silverwind changed the title Use font-weight var instead of 600 Use font-weight var instead of 600 and increase to 610 Apr 24, 2023
@silverwind
Copy link
Member

FTR, I see no difference between 601 and 610, so we may be able to reduce to 601 for the same effect. Any reason why specifically 610?

Screenshot 2023-04-24 at 18 01 23

@wxiaoguang
Copy link
Contributor Author

No particular reason indeed ... Personally I like to leave some buffer space when writing code 😁

It could be lowed to 601 if you like.

@silverwind
Copy link
Member

Yeah, let's go with 601, the user already confirmed it works for them as well.

@silverwind silverwind changed the title Add --font-weight-bold and set it to 601 Add --font-weight-bold and --font-weight-semibold and set previous bold to 601 Apr 24, 2023
@silverwind
Copy link
Member

silverwind commented Apr 24, 2023 •
edited
Loading

--font-weight-semibold added and applied to repolist. I think it looks cleaner this way.

Before (601):

Screenshot 2023-04-24 at 18 56 46

After (500):

image

@wxiaoguang
Copy link
Contributor Author

--font-weight-semibold added and applied to repolist. I think it looks cleaner this way.

I guess we do not need to bold them, just use normal font?

@silverwind
Copy link
Member

Right, that's fine as well.

@silverwind silverwind changed the title Add --font-weight-bold and --font-weight-semibold and set previous bold to 601 Add --font-weight-bold and set previous bold to 601 Apr 24, 2023
@silverwind
Copy link
Member

Done. I guess there will be more places for bold removal in the UI not that it's more noticeable, but can be fixed later when discovered.

@silverwind silverwind enabled auto-merge (squash) April 24, 2023 17:17
@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 24, 2023
@silverwind silverwind disabled auto-merge April 24, 2023 17:41
@silverwind silverwind enabled auto-merge (squash) April 24, 2023 17:44
@silverwind silverwind merged commit 20a3b03 into go-gitea:main Apr 24, 2023
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 24, 2023
@wxiaoguang wxiaoguang deleted the fix-font-weight branch April 25, 2023 01:12
zjjhot added a commit to zjjhot/gitea that referenced this pull request Apr 25, 2023
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
0a90017 
* giteaofficial/main:
  default show closed actions list if all actions was closed (go-gitea#24234)
  [skip ci] Updated translations via Crowdin
  update nightly drone docker tag (go-gitea#24311)
  Remove org users who belong to no teams (go-gitea#24247)
  Fix typo in API route (go-gitea#24310)
  Add --font-weight-bold and set previous bold to 601 (go-gitea#24307)
  Mark `/templates/swagger/v1_json.tmpl` as generated file (go-gitea#24306)
  Improve External Wiki in Repo Header (go-gitea#24304)
  Unify nightly naming across binaries and docker images (go-gitea#24116)
  Wrap too long push mirror addresses (go-gitea#21120)
wxiaoguang added a commit to wxiaoguang/gitea that referenced this pull request Apr 25, 2023
@wxiaoguang
Add --font-weight-bold and set previous bold to 601 (go-gitea#24307)
406dc80 
Fix go-gitea#24305

According to MDN, "bold" starts from 700, some fonts do not provide
"bolding" for weight 600

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
# Conflicts:
#	web_src/js/components/DashboardRepoList.vue
@wxiaoguang wxiaoguang mentioned this pull request Apr 25, 2023
Merged
@wxiaoguang wxiaoguang added backport/done All backports for this PR have been created outdated/backport/v1.19 This PR should be backported to Gitea 1.19 labels Apr 25, 2023
@silverwind silverwind mentioned this pull request Apr 25, 2023
Merged
silverwind added a commit that referenced this pull request Apr 25, 2023
@silverwind
Restore bold on repolist (#24337)
ee6fa8d 
Looking at it again, it does look a bit "odd" without bold, so revert
the repolist change done in
#24307.

<img width="141" alt="image"
src="https://user-images.githubusercontent.com/115237/234331813-c6e2402f-e099-43b3-aed6-46a0e24e3899.png">
silverwind pushed a commit that referenced this pull request Apr 25, 2023
@wxiaoguang
Add --font-weight-bold and set previous bold to 601 (#24307) (#24331)
5f82011 
Backport #24307

Fix #24305

According to MDN, "bold" starts from 700, some fonts do not provide
"bolding" for weight 600

Manually backport, no CSS conflict.
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jul 31, 2023
@delvh delvh added topic/ui-interaction Change the process how users use Gitea instead of the visual appearance and removed topic/ui Change the appearance of the Gitea UI kind/usability labels Oct 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@silverwind silverwind silverwind approved these changes

@delvh delvh delvh approved these changes

Assignees
No one assigned
Labels
backport/done All backports for this PR have been created lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. outdated/backport/v1.19 This PR should be backported to Gitea 1.19 size/M Denotes a PR that changes 30-99 lines, ignoring generated files. topic/ui-interaction Change the process how users use Gitea instead of the visual appearance type/enhancement An improvement of existing functionality
Projects
None yet
Milestone
1.20.0
Development

Successfully merging this pull request may close these issues.

Bold text not rendering for some fonts at font-weight: 600 e.g. 'Segoe UI'
4 participants
@wxiaoguang @silverwind @delvh @GiteaBot