I Hit a Wall Made of Compound Path
Week 5 of Founding Typogram
I wrote a follow-up article on this subject:
Last week, I hit a wall made with Compound Path. Let me explain.
I want to add a feature to Typogram: make every part of a letterform selectable and editable on its own. For example, the letter “i” has two parts: the dot and the stem.
But font treats the letter as a whole, rendered by a single compound path object. Users can’t easily select just the dot and make changes to it, such as enlarging it, changing it to a different color, etc. Represented in code, it is a single <path> object with an exceptionally long d property (for pathData) and a single fill property.
Say you want to apply a different color to the dot of the “i” or the inner bowl of “a”, you need to find a way to separate it from the rest of the letter. Users can multi-select the control points for the part that they want to modify, but the process can be tedious and difficult depending on the situation:
I tasked myself to change that and create a better way. The long d property can be sliced into multiple strings by the “Z” letter, marking the end of a child path.
Each code block represents a separate child path. We can tell by removing a code block and see what happens:
I can then separate them into their own separate path objects, and it would still look the same. However, some children paths are meant to be “cut-out,” such as the inner circle of the letter “o,” I can tell them apart by the path direction – whether it is clockwise or counterclockwise. I will fill the “cut-out” path with white instead of black:
Now I ran into this nightmare of a font (for me to render, the design is brilliant), Monoton, their “o” looks like this:
It has 8 children paths – 4 regular paths and 4 “cut-out” paths. Now here is the thing: in Compound Path, you can switch the order of these pathData code blocks, and it would still render the same:
But in my app, the order of these children paths matters because it determines their z-index, i.e. who gets to be rendered on top. If they went out of order, in which case, Monoton font did, it renders to this:
If I just change the order of the children paths, it would render correctly:
For now, I can’t find a better solution to this other than modifying the source font file and correct the orders, which is my planned next step. It is a painful process as there are many fonts with the same issue, but I am willing to do whatever as long as I get the feature implemented correctly. Let me know if you can find a clever alternative way to solve this to save me days of work!
Founders’ Besties
- a weekly listicle of helpful links for startup founders!
Cronnit
Link: https://cronnit.us
Editor’s note: If you do a lot of Reddit posting, this handy free tool allows you to schedule posts ahead of time. One thing you have to be mindful of is that this service doesn’t include “flairs,” aka. Reddit tags. If your subreddit requires having flairs, you may have to do it manually. You can schedule up to five posts per day, and you can contact the developer to increase this limit.
Deploy Empathy Newsletter
link: https://www.getrevue.co/profile/mjwhansen
Deploy Empathy is a helpful newsletter about customer interviews. If you struggle with asking the right questions and keeping a conversation with your customers, this is a great resource.
No-Code AI/ML Toolings
Twitter Thread Link:
No-Code AI or ML in your projects? Those are the 9 best tools & APIs for integrating into your projects.
❧
See you next week! If you have friends who are interested in founding startups, please consider sharing my newsletter with them!