Thoughts on Font-x-size property for CSS

Dear all

I noted Andy's discussion thread on this topic with interest.

https://github.com/w3c/low-vision-a11y-tf/discussions/118

I tried to comment on this thread in Github, but at the moment it seems I'm not able to, and I'm trying to resolve this as a separate issue.

In the meantime though, in preparation for discussing this topic later today, I had the following thoughts:


*         I absolutely agree that the guidance needs to specify a minimum x-height, and also that we need to be able to offer guidance on font-weight in an absolute sense (in terms of the stroke thickness of the letters), rather than a relative sense, like font-weight: 400, which means something different for different fonts.

*         I wondered if this could be solvable via an API, rather than attempting to change the CSS spec. I'm not a JavaScript programmer, but I believe something like the below procedure ought to be somewhat trivial for an experienced JavaScript programmer to implement. This would take an input of the font-name, and then return the ratio of x-height to font-size, by doing something a bit like the following:

o   create an HTML canvas of 100 x 100px with a white background

o   render the lowercase letter x onto the canvas, in pure black, with the given font-name and setting the font-size to 100px;

o   export the entire canvas to PNG

o   trim the PNG to eliminate the white pixels

o   report the height of the image that results as a proportion of the original HTML canvas height.

*         A similar procedure could perhaps pick a different letter to try and get the stroke width of the letters as a ratio of the font-size, although this may need some further thought.

*         Using this API, I would have thought it would be possible to automatically generate a table of pretty much every font name that currently exists, and the ratio of x-height to font-size. (Assuming any font licensing issues can be resolved)

*         It should then be possible to dynamically query this lookup table, or indeed use the above API on the fly in order to automatically assess webpages to determine if the x-height of the fonts is sufficient, given the font-name and the font-size.

*         It should also be possible to create a tool that takes the font-name as an input, and returns the minimum font-size, based on the minimum x-height in our guidance, and the known ratio of x-height to font-size from the API, or indeed the lookup table.

*         Doing something similar for font-weight would be ideal, and would need some further thought.

I would have thought the above could be ready to implement in a matter of days, whereas I would have thought that changing the CSS specification would take years, and then some more years before all browsers supported it, and even then backwards compatibility would still be a pain!

I will look forward to further discussions on this topic, many thanks.

Best wishes

Sam Waller
University of Cambridge, Engineering Design Centre
01223 332826