New Product: Glossowary! Embedable JS Glossaries
Here’s a little project I’ve been working on – a way to add a glossary to any page. Words in the glossary are subtly underlined, and clicking them will show the definition.
This should work on any page, you just need to create a glossary at glossowary.com, add the JavaScript to your page, and add the supplied class names to HTML elements that you want glossarized.
Here’s a short demonstration:
He staggered into the “Coach and Horses” more dead than alive, and flung his portmanteau down.
How does it work in WordPress?
- Install the plugin https://wordpress.org/plugins/insert-headers-and-footers/
- Add the following code to your footer using the plugin
<script src="https://ecdn.glossowary.com/embed_scripts/a9d52329-694d-4a9c-b99a-5f321543bfe9.js"></script>
<script>GLOSSOWARY_a9d52329694d4a9cb99a5f321543bfe9.init();</script>
- Select your content block when editing a post or page, view the settings for the block, click ‘Advanced’, and then add the supplied Glossowary CSS class as an Additional CSS class for that content block
It’s pretty basic, pretty much just what it says on the tin, but it’s far easier than rolling your own solution for every website you build, and includes team support for collaboration. I’m currently using it for some documentation, it’s also useful for making jargon-heavy documents like terms and conditions more accessible. More features to come later!