chrisintheweeds linguistics, python

Rendering Interlinear Glosses in WordPress

So, I’m trying out wordpress.com as an minimum effort way to host a blog, but I have a problem. Specifically, I want to be able to put interlinear glosses in blog posts, and unless I pay for the expensive business package I can’t install my own WordPress plugins or add interlinear rendering using Javascript into the template.

The only obvious solution I can see is to generate some HTML for the interlinears and then copy and paste into the blog post. In the past, when I’ve hosted or built blogging software myself, I’ve written plugins which use one inline table per word to line up the word boundaries. Other people have used similar approaches, either using tables or definition lists.

Below is an example of the effect you get:

cars
car-PL
are
are
great
great

Cars are great

This HTML code was generated using the following Python code. I could modify it slightly to either read the text from the command line or a text file or whatever as a second step. The CSS styling is based on other people’s examples here.

from airium import Airium
import pyperclip 

interlinear = Airium()

#########################################################################
# Parse the text to turn into an interlinear
#########################################################################

lines = [
        'cars are great',
        'car-PL are great'
        ]
words = zip(*[l.split() for l in lines])
translation = 'Cars are great'

#########################################################################
# Create the interlinear
#########################################################################

DIV_STYLE='background-color: #ccffcc;'
DL_STYLE='display:inline-block; margin:0 0.5em 0 0; background-color: #ccffcc;'
DT_STYLE='font-weight:bold;'
DD_STYLE='margin-left: 0; padding-left: 0; font-size:smaller;'
P_STYLE='margin-top: 0em; font-style:italic;'


with interlinear.div(style=DIV_STYLE):
    for w in words:    
        with interlinear.dl(style=DL_STYLE):
            with interlinear.dt(style=DT_STYLE):
                interlinear(w[0])
            for gloss in w[1:]:                
                with interlinear.dd(style=DD_STYLE):
                    interlinear(gloss)
    if translation:
        with interlinear.p(style=P_STYLE):
            interlinear(translation)
            
pyperclip.copy(str(interlinear))

Obviously this is a bit sub-optimal, because the CSS is embedded multiple times in the HTML instead of being defined in a separate file or the head of the document. But I don’t think that direct customisation of the template is possible, so it may not be possible to do better than this.