A picture of a crow

Frederick's Perch

HamNoSys symbol name → HamNoSys Web Component

Published on

The Hamburg Notation System (HamNoSys) is a sign language transcription system that aims to be able to transcribe as many sign languages as possible. It’s not ASCII (or even Unicode) compatible, so it’s cumbersome to type. However, every symbol has an ASCII compatible name― for example, hamfinger2 represents hamfinger2.

Since I’m making a signed conlang and wanted to publish the grammar as a webpage, I wrote a little Web Component to render HamNoSys symbol names into HamNoSys, which adds a custom <ham-signs> tag that lets you type HamNoSys symbol names and turn them into their HamNoSys symbols, like you would in the HamNoSys LaTeX package.

You can use the HamNoSys input palette to get the symbol names if you don’t know them.

To write HamNoSys with this, use the <ham-signs></ham-signs> tags with HamNoSys symbol names between them. For example, the DGS sign AUGE eye would be written in HTML as follows:

<ham-signs>
    hamfinger2,hamextfingerul,hampalmdl,hameyes,hamlrat,hambetween,hamcheek,hamlrat,hamclose,hammovei,hamtouch,hamrepeatfromstart
</ham-signs>

Which would be rendered as:

hamfinger2,hamextfingerul,hampalmdl,hameyes,hamlrat,hambetween,hamcheek,hamlrat,hamclose,hammovei,hamtouch,hamrepeatfromstart

Adding it to your page

The following code is available under a free and open source MIT license, so you can use it for free without attribution, for both commercial or non-commercial purposes.

CSS for displaying HamNoSys

To use it, first make sure you have the HamNoSys font and add the following styles to your page:

@font-face {
  font-family: HamNoSys;
  src: url('HamNoSysUnicode.ttf');
  size-adjust: 180%;
}

ham-signs {
  font-family: HamNoSys;
}

The Web Component script

After adding the styles, add the following <script> tag to your page, just before the closing </body> tag: