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.

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

Center position of arrow glyph in table headings #268

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

gvanhorne
Copy link

Closes #267.

image

Copy link
Collaborator

@Fil Fil left a comment

Choose a reason for hiding this comment

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

Is there a way to fix it on Edge / Windows without changing it on Chrome / Mac?

@mbostock
Copy link
Member

I don’t think this is the right solution, but thank you for the contribution. I expect the problem here is that the width of 0.5em isn’t right with some fonts? It would probably be better to use Inter here to ensure consistent rendering across platforms. Alternatively we might need to redesign how we display the sorting control.

@gvanhorne
Copy link
Author

For what it's worth I'm seeing the issue persist in Windows 10 / Chrome Version 128.0.6613.120 as well

@gvanhorne
Copy link
Author

From visual inspection I'm not convinced a different font will resolve the issue. It looks to me like the text content of the th element is overlapping with the rightmost edge of the span element with the "▴" symbol. See screenshot below:
image

@mbostock
Copy link
Member

mbostock commented Sep 10, 2024

I think it is a font issue because the width of that element is hard-coded to 0.5em. If in the available system font the glyph (▾ or ▴) doesn’t have an actual width of 0.5em, you’ll see exactly the pictured layout problem. My guess is that 0.5em only works for the San Francisco system font on macOS, not for other platforms; it’s not wide enough on Windows. (And the visual width of the glyph isn’t the same as the layout width.)

That said, maybe it’s as simple as adding a text-align: center or a display: flex so that if the glyph isn’t 0.5em, it’s at least centered in the reserved area, rather than going too far right or left?

@gvanhorne
Copy link
Author

gvanhorne commented Sep 10, 2024

That seems like a good suggestion. Adding display: flex-inline; and justify-content: center; looks good on my windows machine for Edge / Chrome. I'll test on MacOS later on 👍

@Fil
Copy link
Collaborator

Fil commented Sep 10, 2024

Yes it's perfect on Chrome/Firefox/Safari on macOS too 👍

@gvanhorne
Copy link
Author

Nice! Thanks for verifying 🤝

@gvanhorne gvanhorne changed the title Add right padding to th span element Center position of arrow glyph in table headings Sep 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inputs.table sort arrow kerning
3 participants