Intro

This demo is a little homage to my last company, Inkah, as well as all the pop-up dictionaries I've used to help me learn Chinese while scrolling on the internet.

It's also a little celebration of the Intl.Segmenter API becoming available in all three major browser engines.

How it's made

There's a couple of key browser APIs needed to get this demo working.

Here, I'm using the X and Y coordinates from a MouseEvent and passing those to the document.caretPositionFromPoint method. This returns a a Range object, which will give you access to the DOM element underneath the cursor (the so-called offsetNode), which in turn gives you access to the text content. That's what we need for segmenting.

Not only that, but you can get the offset which, if you are hovering over a textNode, will tell you how many characters into the textNode your position is. This is especially useful in Chinese.

A note about written Chinese, and words

Chinese words and phrases can be made up of one or more characters, but are often between one and four. There are no spaces in written Chinese, so it's very important to understand the context of what you're reading, since 3 characters side by side might mean one thing in one context, and be interpreted differently in another context.

Next, we want to use the Intl.Segmenter object to segment the underlying text node. By passing in the text content and configuring the language and granularity, we get our segments. The index property of each segment in the array keeps track of the starting point of the word. In other words, if the index is 14, the 14th character in the text node is where that word starts. And that's super useful information, because we can match up the index returned from the segmenter API with the offset returned from the caretPositionFromPoint method to keep track of which word/phrase/character is being hovered. That is what we finally pass to our dictionary, and highlight in big text at the top.

And that's all it takes! It's lovely to know how easy this is, and be able to spin up a POC in an hour, with plain HTML, CSS, JavaScript, a little web component help from Github Catalyst and a dictionary package. And it works in all browsers. Go figure.