inputs
inputs copied to clipboard
observablehq
Center position of arrow glyph in table headings
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.
For what it's worth I'm seeing the issue persist in Windows 10 / Chrome Version 128.0.6613.120 as well
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:
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?
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 👍
