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

Fix vertical alignment of text in nccounterbubble #4200

Closed
szaimen opened this issue Jun 8, 2023 · 23 comments
Closed

Fix vertical alignment of text in nccounterbubble #4200

szaimen opened this issue Jun 8, 2023 · 23 comments
Labels
2. developing Work in progress design Design, UX, interface and interaction design enhancement New feature or request

Comments

@szaimen
Copy link
Contributor

szaimen commented Jun 8, 2023

As discussed with @jancborchardt and @nimishavijay, the text inside the counterbubble should be positioned right in the center and not a bit off.

See the following screenshot:
image
@szaimen szaimen added enhancement New feature or request 1. to develop Accepted and waiting to be taken care of design Design, UX, interface and interaction design labels Jun 8, 2023
@szaimen
Copy link
Contributor Author

szaimen commented Jun 8, 2023

As @nimishavijay and me found out this happens due to the font-family used. In our case it got fixed by using sans-serif. Maybe we should enforce this here?

@jancborchardt
Copy link
Contributor

The font should be the same as used elsewhere, otherwise that will look off instead.

How is the centering currently achieved? We can change the approach, either via vertical align, or padding, or however possible.

@szaimen
Copy link
Contributor Author

szaimen commented Jun 8, 2023 •
edited
Loading

The font should be the same as used elsewhere, otherwise that will look off instead.

It uses the first font that is installed on the system in this order: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol

How is the centering currently achieved? We can change the approach, either via vertical align, or padding, or however possible.

The problem is indeed the font and not the centering itself. On macOS for example everything looks fine since a different system font, probably -apple-system or BlinkMacSystemFont is used.

See the following screenshot that shows this pretty clearly on my system:
image

The blue-spacing on top comes from the font used.

This is how it looks with sans-serif for example:
image

@szaimen
Copy link
Contributor Author

szaimen commented Jun 8, 2023

So it seems to come down to system font rendering here...

@szaimen szaimen mentioned this issue Jun 8, 2023
Merged
6 tasks
@szaimen
Copy link
Contributor Author

szaimen commented Jun 10, 2023

Should we enforce a specific font then here?

@szaimen
Copy link
Contributor Author

szaimen commented Jun 12, 2023

also cc @marcoambrosini

@nimishavijay
Copy link

There were issues with using custom fonts in the past, if I remember correctly? My worry is that changing something like the font for this one element will both look out of place visually and not render correctly if that font is not supported/installed on the system.

@marcoambrosini
Copy link
Contributor

Who did the original screenshot? Could we gather more information about where it looks bad and try to find out why?

@szaimen
Copy link
Contributor Author

szaimen commented Jun 13, 2023 •
edited
Loading

@marcoambrosini this is on my windows 11 machine. It happens due to the system font used. Please read the conversation above.

@marcoambrosini
Copy link
Contributor

Yeah I've seen that but I was missing the OS info. Does that happen on all browsers?

@szaimen
Copy link
Contributor Author

szaimen commented Jun 14, 2023

Does that happen on all browsers?

Yes, happens at least in Brave (Chromium based) and Firefox - so in the most important browsers.

@szaimen
Copy link
Contributor Author

szaimen commented Jun 20, 2023

@nextcloud/designers what do we do here then?

@nimishavijay
Copy link

I would vote against changing the font. If there is a way to change the padding on only the problematic browsers/OSes/etc that would fix it, is that technically feasible?

@susnux
Copy link
Contributor

susnux commented Jun 25, 2023

Maybe we can reorder the fonts? This might help for windows without any logic changes.

@szaimen
Copy link
Contributor Author

szaimen commented Jun 25, 2023 •
edited
Loading

Maybe we can reorder the fonts? This might help for windows without any logic changes.

This might be a good idea indeed. I just tested again and "Segoe UI" seems to be the culprit. sans-serif is the solution on Windows which is the next available font on windows (in our list). So maybe just remove Segoe UI or move it behind sans-serif?

@szaimen
Copy link
Contributor Author

szaimen commented Jun 26, 2023 •
edited
Loading

I opened #4271 for a test. With that everything looks good on my end:
image
The correct PR is in nextcloud/server#39008

@szaimen szaimen mentioned this issue Jun 26, 2023
Merged
@szaimen szaimen added 2. developing Work in progress and removed 1. to develop Accepted and waiting to be taken care of labels Jun 26, 2023
@susnux susnux mentioned this issue Jul 27, 2023
Merged
1 task
@susnux
Copy link
Contributor

susnux commented Sep 12, 2023

see nextcloud/server#39008

@susnux susnux closed this as completed Sep 12, 2023
@szaimen
Copy link
Contributor Author

szaimen commented Sep 12, 2023

I fear this doesnt fix the problem unfortunately.

@szaimen szaimen reopened this Sep 12, 2023
@jancborchardt
Copy link
Contributor

Any update regarding this? At least in Talk at 100% it looks fine, and on the Vue components page as well? https://nextcloud-vue-components.netlify.app/#/Components/NcCounterBubble
(Although the outlined example shows as white on white for me.)

@szaimen
Copy link
Contributor Author

szaimen commented Nov 2, 2023

Any update regarding this? At least in Talk at 100% it looks fine, and on the Vue components page as well? https://nextcloud-vue-components.netlify.app/#/Components/NcCounterBubble (Although the outlined example shows as white on white for me.)

It depends on the system font used. It is broken on windows with segoe ui afaik

@jancborchardt
Copy link
Contributor

@szaimen as far as you know or it is the case? :) Could you test on Windows to confirm/reproduce again with master or so we can close the issue?

@jancborchardt jancborchardt changed the title fix design of nccounterbublbe fix design of nccounterbubble Feb 7, 2024
@jancborchardt jancborchardt changed the title fix design of nccounterbubble Fix vertical alignment of text in nccounterbubble Feb 7, 2024
@ShGKme
Copy link
Contributor

ShGKme commented Feb 7, 2024

On Windows with Segoe UI (default)
image

@szaimen
Copy link
Contributor Author

szaimen commented Feb 7, 2024

Indeed, we cannot fix this because Segoe UI is broken. Since we also decided to not use a different font, I will close this.

@szaimen szaimen closed this as completed Feb 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
2. developing Work in progress design Design, UX, interface and interaction design enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jancborchardt @susnux @ShGKme @marcoambrosini @szaimen @nimishavijay