I wish the post had directly linked to the code for the curious, rather than just having curl commands containing URLs for the code. The missing links:
Looking at the Testing section in Firefox for Android, I’m seeing that the left vertical bar of the H in
“Hello”
is aligned farther left than the vertical bar of the H in
Hello
I don’t see that problem in Firefox or Google Chrome on macOS.
Looking at your CSS, I see why:
--font-family-prose: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
body { font-family: var(--font-family-prose); }
Since system-ui is the first value, the browser is showing different fonts on Android and macOS, and those fonts have different metrics.
The solution would be to explicitly set the font-family of any text you apply hanging punctuation to. You might also want to add a warning on the page about this potential problem.
Thanks for the reminder to link to the implementation. I had a TODO to add those when I moved the docs from the README to a GitHub Pages site but it got lost. Should be fixed now.
With respect to the -system-ui yeah, that’s something I need to figure out still.
I was hoping that there would be some sort of way in CSS to do like --double-quote-width: calc(width("“")); or something. There is a CSS ch unit which is defined as “the width of a 0 character in the type face” but that’s not quite what I need here.
The nice thing about using -system-ui is that the font looks native for the user and the page loads quickly without having to wait for fonts to download, so it would be nice to not have to lose that aspect.
You’re right that I should address that in the styles and and call it out as part of the steps for configuring the CSS variables.
I think I will probably include something about how to use getBoundingClientRect() to calculate the size of “ and ‘ characters in the presence of fallback or -system-ui fonts.
I wish the post had directly linked to the code for the curious, rather than just having
curlcommands containing URLs for the code. The missing links:Looking at the Testing section in Firefox for Android, I’m seeing that the left vertical bar of the H in
is aligned farther left than the vertical bar of the H in
I don’t see that problem in Firefox or Google Chrome on macOS.
Looking at your CSS, I see why:
Since
system-uiis the first value, the browser is showing different fonts on Android and macOS, and those fonts have different metrics.The solution would be to explicitly set the
font-familyof any text you apply hanging punctuation to. You might also want to add a warning on the page about this potential problem.Thanks for the reminder to link to the implementation. I had a TODO to add those when I moved the docs from the README to a GitHub Pages site but it got lost. Should be fixed now.
With respect to the
-system-uiyeah, that’s something I need to figure out still.I was hoping that there would be some sort of way in CSS to do like
--double-quote-width: calc(width("“"));or something. There is a CSSchunit which is defined as “the width of a0character in the type face” but that’s not quite what I need here.The nice thing about using
-system-uiis that the font looks native for the user and the page loads quickly without having to wait for fonts to download, so it would be nice to not have to lose that aspect.You’re right that I should address that in the styles and and call it out as part of the steps for configuring the CSS variables.
I think I will probably include something about how to use
getBoundingClientRect()to calculate the size of“and‘characters in the presence of fallback or-system-uifonts.Why is this post’s metadata in a blockquote? The element is for quoting sources according to the HTML spec.