The first problem was that the width of a whitespace character isn't always consistent, but can differ depending on where it's located or what letters surround it. This sort of worked until I ran into two problems. I thought I could just add a single whitespace character to the middle of the word so the word would no longer render as an icon, and then compare that width to the width of the unchanged word. I didn't know if it could handle ligature icons, but testing it out showed that it could. Whilst thinking about this, I remembered the canvas API measureText which can measure the width of a string based on a given font size and font family. However, I couldn't just ask what the width of the textContent was since it would return the word "file" and not the ligature icon. I figured if the word "file" was replaced by a single character icon, then there would be a substantial difference in its rendered width compared to its word width (1 character vs. I next thought I could determine when a ligature icon was used by checking the width of the word. This meant that if we ran into issues with the library, we wouldn't be able to get them fixed without making a fork ourselves, which was less than ideal. In the same issue, users mentioned a fork of the library that supposedly supports WOFF2, but it doesn't seem to be actively developed. There's been an open issue to support it, but so far no work has been done on it. Unfortunately, I soon found out that the library does not support WOFF2 files, which is what Material Icon uses. The website said it uses the opentype.js library to parse the font files, which I figured I could also use. I discovered the website Font Drop which could parse a font file and display all the information about it, including its ligatures. My next idea was seeing if I could parse the font file for information about which words were ligatures. Knowing if it's a ligature icon font would not be enough to guarantee all uses of it are icons. Even though some ligature icon fonts use it, I couldn't rely on it.Īdditionally, just because a font uses ligature icons doesn't mean that it will only be used for icons. However, turning the property off in devtools didn't stop the icon from displaying so it's not a requirement to show them. I noticed ligature icon fonts typically use a property called font-feature-settings and thought it might be required to display a ligature icon. I initially thought I could detect a ligature font based on the CSS properties used when declaring it. Different Ideas for Detecting Ligature Icons Through CSS Properties If you don't want to read through my process, you can skip to the end where I post the code. It took me awhile, but I think I found a reliable and accurate way to detect them. The problem with ligature icons is that there is no easy way to detect when a font uses ligatures and what words are associated with ligature icons. Examples of a ligature icon fonts include Material Icon, Ligature Symbols, and Symbolset. For example, a ligature icon for the word "file" would replace the word with an icon of a file. We needed to be able to detect when a string of text had been replaced by a ligature icon.Ī ligature icon is a special type of ligature where instead of a combination of letters it displays an icon. While working on axe-core, an accessibility testing library, we ran into an interesting problem.
0 Comments
Leave a Reply. |