Thanks for coming to Coding for Beginners #3 (summary below)

Technology
1

Thanks for coming today @lgessler , @Fiachra , @cscanlon , @SarahDopierala , and @Hilaria for coming today!

Here is the example page we came up with:

https://interlinears.doclingforum.repl.co/

We worked on a single sentence, from a Chatino language — the San Juan Quiajihe variant, if I’m not mistaken (right @Hilaria?). Here’s a sample page from the story by Hilaria Cruz & Mary Griffin, with beautiful accompanying artwork by Mackenzie MaCamish:

You can see the whole story here:

https://cardmaillouisville-my.sharepoint.com/personal/h0cruz01_louisville_edu/Documents/Childrens%20books%20chatino/MaryChatinoBook-con%20portada-folleto.pdf

Screen Shot 2021-07-20 at 1.11.20 PM
Screen Shot 2021-07-20 at 1.11.20 PM2374×1786 529 KB

So our premise was, what if we were going to create an interlinearized version of this story for the web? We would want to gloss each word, and to use the web platform to approximate standard interlinear text notation.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
  <style>
body {
  background: hsl(261.8, 56.2%, 26.9%);
  color: white;
  font-family: sans-serif;
}

p {
}

div.sentence {
  background: white;
  padding: 10px;
  color:black;
  border-radius: 5px; 
}


div.words {
  margin-left: 2em;
}

a {color:white;}

div.words p {
  display: inline-grid;
  margin: 10px;
}

[lang="en"]{
  /* color:red; */
}

p.transcription {
  font-size: larger;
  font-weight: bold;
}

[lang="es"]{
  display:none;
  color:green;
}
</style>

</head>
<body>

<h1>Interlinearization of SenE</h1>


<a href="https://cardmaillouisville-my.sharepoint.com/personal/h0cruz01_louisville_edu/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fh0cruz01%5Flouisville%5Fedu%2FDocuments%2FChildrens%20books%20chatino%2FMaryChatinoBook%2Dcon%20portada%2Dfolleto%2Epdf&parent=%2Fpersonal%2Fh0cruz01%5Flouisville%5Fedu%2FDocuments%2FChildrens%20books%20chatino&originalPath=aHR0cHM6Ly9jYXJkbWFpbGxvdWlzdmlsbGUtbXkuc2hhcmVwb2ludC5jb20vOmI6L2cvcGVyc29uYWwvaDBjcnV6MDFfbG91aXN2aWxsZV9lZHUvRVFIam9BejRXU3RDbHpXQ05vRFRXN1lCcmc1elVzNmgwdklhTnY5STBOWjRSUT9ydGltZT00Qi1aZjVOTDJVZw">SenE storybook</a> (PDF)



<div class="sentence"> 
  <p class="transcription">
    SenH ntqenJ senE janqG kanqH
  </p>
    
  <div class="words">
    <p>
      <span lang>senH</span>
      <span lang=en>quietly</span>
      <span lang=es>calladamente</span>
    </p>
    <p>
      <strong>ntqenJ</strong> 
      <span lang=en>lay (progressive)</span>
      <span lang=es>acostarse (progressivo)</span>
    </p>
    <p>
      <strong>senE</strong>
      <span lang=en>Spanish moss</span>
      <span lang=es>musgo española</span>
    </p>
    
    <p>
      <strong>janqG</strong>
      <span lang=en>that</span>
      <span lang=es>eso</span>
    </p>

    <p>
      <strong>kanqH</strong>
      <span lang=en>then</span>
      <span lang=es>entonces</span>
    </p>
  </div>

  <p class="translation" lang=en>
    The Spanish moss laid down quietly then
  </p>
  <p class="translation" lang=es>
    El musgo española se acostó calladamente.
  </p>
</div>

<footer>
<h2>Chatino Tone notation</h2>
<ol>
<li>H - mid-superhigh</li>
<li>J - mid-low</li>
<li>E - level high</li>
<li>G - low-high </li>
</ol>
</footer>

<hr>

</body>

</html>

Some key ideas:

  • HTML elements may be nested: one tag put “inside” of another. The canonical example of this is the list tag, well, the two list tags, which look like this:
<ul>
<li>apples</li>
<li>bananas</li>
<li>pears</li>
</ul>

Which renders like this:

  • apples
  • bananas
  • pears

And its “ordered” equivalent:

<ol>
<li>Grind coffee beans</li>
<li>Brew coffee</li>
<li>Drink coffee</li>
</ol>
  1. Grind coffee beans
  2. Brew coffee
  3. Drink coffee

Nesting is used to express hierarchy in HTML. So our interlinear sentence is represented by two levels of nesting, something like:

  • sentence
    • transcription
    • translation
    • words
      • word
        • form
        • gloss

        Each of those levels gets a tag, including the “groups”:

        
<div class="sentence"> 
  <p class="transcription">
    SenH ntqenJ senE janqG kanqH
  </p>
    
  <div class="words">
    <p class="word">
      <span lang>senH</span>
      <span lang=en>quietly</span>
      <span lang=es>calladamente</span>
    </p>
  </div>
<p class="translation">The Spanish moss laid down quietly then.
</p>
</div>

        If we just stick this in a page, it doesn’t look much like an interlinear gloss:

        SenH ntqenJ senE janqG kanqH

        senH quietly calladamente

        ntqenJ lay (progressive) acostarse (progressivo)

        senE Spanish moss musgo española

        janqG that eso

        kanqH then entonces

        The Spanish moss laid down quietly then.

        What’s missing is a little CSS, which tells the paragraphs with the class word to… well, behave like words:

        .word {
  display:inline-block;
}

        That little bit of CSS is really the heart of the matter. If you look at the source code at the rendered page, you’ll see some comments that explain line-by-line.

        Obviously, editing HTML and CSS by hand is not scalable. But I recommend going through the process, because even though it’s a little painstaking, you will get an idea for how the system hangs together.

        Next time, we’ll look at using some (pre-written!) Javascript to generate markup like this from a data file.

        Questions welcome!

2 Likes
2

Hi Pat,

Thank you so much for organizing the meeting today. I had a blast and yes, this is San Juan Quiahije Chatino. Cheers.

2 Likes
3

Yes, many thanks, Pat! And thanks for the write up as well :smiley: Much appreciated :raised_hands: Looking forward to the next one!

1 Like