Htmlex: For Formatting Lingusitic Examples In Html

HTMLEX

In the last semester I have been putting my teaching slides together using reveal.js, rather than beamer as I usually would. Reveal.js is a javascript library for creating slide decks, where the slides are written in html format and styled with css and javascript. Overall it’s been a good experience, and I like using thi software. I will shortly post some articles about using reveal.js for making linguistics slides, but before that, I want to share a small part of it.

I have been wanting to use reveal.js rather than beamer for a while, since the sldies look really nice on their example, and being effectively webpages, are interactive, rather than static like pdf files. Also, whilst beamer is a great piece of software, I wanted to try something new as the results turn out very similar in beamer, and customisation is difficult, but not impossible. One thing that has held stopped me up until this semester is the formatting required by linguists: we need to label examples with numbers and frequently need to line up morpheme glosses. Both of these things are done automatically in LaTeX using gb4e but I couldn’t find an alternative for html based on a quick few looks.

When I finally did start using reveal.js, I came across this answer on stackexchange about the very issue of formatting glossing in html. So, I modified the answer gave, and have built htmlex, which is a css file that defines elements that can be used for formatting linguistic examples when writing in html. It’s available on my github page and available on an open source license. It’s intended to be a html equivalent to gb4e/linguex, for those of a LaTeX background. It allows you to create output like the following that can be used in html pages like this, as well as html slides built using, for example, reveal.js or impress.js.

That's not my duck.

#

Its beak is too shiny.

*

My that's duck.

Her eggs are so smooth.

#

    1. Ik
    2. I.nom
    1. zag
    2. see.past
    1. twee
    2. two
    1. ber-en,
    2. bear-pl
    1. brood-je-s
    2. bread-dim-pl
    1. smer-en
    2. spread-inf

'I saw two bears, spreading on sandwiches.'

    1. Oh
    2. Oh
    1. dat
    2. that
    1. was
    2. be.3.sg.past
    1. een
    2. a
    1. wonder!
    2. miracle

'Oh that was a miracle!'

For more information, and guide for usage, see https://github.com/pwsmith/htmlex.