uikit
uikit copied to clipboard
pmndrs
Emit event on missing glyph
Currently, https://github.com/pmndrs/uikit/blob/b5f40d84271bb5258375f9bec321d318540143e2/packages/uikit/src/text/font.ts#L223C3-L223C7 silently falls back to the ? glyph when a character is missing.
We should update this to emit a bubbling event (e.g., onMissingGlyph) when this fallback occurs.
This allows apps to listen for missing unicode characters and trigger actions like:
- Generating the missing glyph on the fly (Runtime MSDF).
- Switching languages or font families automatically.
I can draft a PR if we're happy with this approach.
@nyan-left a minimal PR for this sounds great
how would you make the event bubbling?
Maybe its easier to emit the event on the font family?
@bbohlender
I'm proposing component hierarchy bubbling rather than emitting on the font family, as it matches DOM behavior closer.
The idea is that we add a BubblingEvent base class and emitBubblingEvent function that walks up the parentContainer chain, dispatching the event at each level. MissingGlyphEvent extends this base class with the character data.
This gives us dom like behavior. The target stays the original Text component, currentTarget updates at each level, and stopPropagation() works as expected.
e.g
const container = new Container()
const text = new Text({ text: 'ಠ_ಠ' })
container.add(text)
// listen at any level
container.addEventListener('missingglyph', (e) => {
console.log(`Missing ${e.char} in ${e.target.name}`)
e.stopPropagation()
})
<Container onMissingGlyph={(e) => {
// never called back
}}>
<Text onMissingGlyph={(e) => {
console.log(`Missing ${e.char} in ${e.target.name}`)
e.stopPropagation()
}>ಠ_ಠ</Text>
</Container>
The MissingGlyphEvent would include char, charCode, target (the Text), and currentTarget (current ancestor).
@nyan-left is there a similar event for the dom? since you mention matching dom behavior closer.
Matching dom behavior in a sense of the event bubbling up the element tree.
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent would be the closest to mentioned BubblingEvent
for me it feels like emitting a single event on the font is less complex and I do not see the benefit of bubbling through the elements. I do not see a benefit to beeing similar to the dom here if the event does not exist in the dom. Maybe you have a benefit/use-case in mind where bubbeling would be benefitial, but I think it would be very nice if the function that produces the font would be able to recieve this event and fix itself, e.g. a useTTF hook that would not require to be attached to any uikit tree.