DLx Styles Library

DLx Styles Library

Source: ../components/components.less, line 1

2 Components

Styling for linguistic components.

Source: ../components/abbreviation/abbreviation.less, line 1

2.1 Abbreviation

Styling for inline abbreviations (not grammatical glosses).

Example

Digital Linguistics (DLx) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.

<p><dfn class=dfn>Digital Linguistics</dfn> (<abbr class=abbr title='Digital Linguistics'>DLx</abbr>) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.</p>

Source: ../components/cite/cite.less, line 1

2.2 Citation

The .cite class is used for titles of publications, etc. Best practice is to use a <cite> tag as well.

Example

In his review of Endangered languages and new technologies, Hieber (2015) mentions certain concepts in Digital Linguistics.

<p>In his review of <cite class=cite>Endangered languages and new technologies</cite>, Hieber (2015) mentions certain concepts in Digital Linguistics.</p>

Source: ../components/definition/definition.less, line 1

2.3 Definition

The .dfn class is used for terms being defined. Best practice is to use a <dfn> tag as well.

Example

Digital Linguistics (DLx) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.

<p><dfn class=dfn>Digital Linguistics</dfn> (<abbr class=abbr title='Digital Linguistics'>DLx</abbr>) is the science of digital data management for linguistics, including the digital storage, representation, manipulation, and dissemination of linguistic data.</p>

Source: ../components/document/document.less, line 1

2.4 Document

A linguistics article, book chapter, abstract, book, etc. Most of the styles in this file handle counters for examples, figures, etc. The sectioning hierarchy is: ling-document > section > subsection > subsubsection > paragraph > subparagraph. Note that the .paragraph class is different than the .p class. .paragraph is for sectioning, while .p is specifically for styling <p> elements within a ling-document.

Example

Digital Linguistics: An introduction

Daniel W. Hieber

University of California, Santa Barbara

Introduction

This paper introduces the field of Digital Linguistics (DLx). The Navajo word łééchąąʼí dog is an example of a retronym.

  1. Plains Cree (Algonquian)

    asam feed him/her/it
    asām a snowshoe
    askihk a pail
    askīhk on the land/earth

    Okimāsis. 2018. Cree: Language of the Plains / nehiyawewin: paskwāwi-pīkiskwēwin

  2. Chitimacha (isolate)

    siksink his heːčtiʔi

    1. siksi‑nk eagle‑??
    2. his resp
    3. heːčt‑iʔi call‑nf;sg

    an eagle met him

    Swadesh 1939b: A1b.1

  3. Menominee (Algonquian)

    1. pāpaehcen he, she, it (anim.) falls (AI)

    2. pāpaehnaen it (inan.) falls (II)

  4. Menominee (Algonquian)

    1. na͞ewa͞ew s/he sees him, her, it (anim.) (TA)

    2. na͞emwah s/he sees it (inan.) (TI)

<article class=ling-document>

  <header style="text-align: center;">

    <h1 style="font-size: 2em;">Digital Linguistics: An introduction</h1>

    <div>
      <p>Daniel W. Hieber</p>
      <p>University of California, Santa Barbara</p>
    </div>

  </header>

  <section>

    <h2>Introduction</h2>

    <p>This paper introduces the field of <dfn>Digital Linguistics</dfn> (<abbr title='Digital Linguistics'>DLx</abbr>). The Navajo word <i class=txn lang=nav>łééchąąʼí</i> <q>dog</q> is an example of a <dfn>retronym</dfn>.</p>

    <ol class=examples>

      <li class=ex>

        <p class=ex-header>Plains Cree (Algonquian)</p>

        <table>
          <tr>
            <td class=txn lang=crk>asam</td>
            <td class=tln>feed him/her/it</td>
          </tr>
          <tr>
            <td class=txn lang=crk>asām</td>
            <td class=tln>a snowshoe</td>
          </tr>
          <tr>
            <td class=txn lang=crk>askihk</td>
            <td class=tln>a pail</td>
          </tr>
          <tr>
            <td class=txn lang=crk>askīhk</td>
            <td class=tln>on the land/earth</td>
          </tr>
        </table>

        <p class=ex-source>Okimāsis. 2018. <cite>Cree: Language of the Plains / nehiyawewin: paskwāwi-pīkiskwēwin</cite></p>

      </li>

      <li class='ex igl'>

        <p class=ex-header>Chitimacha (isolate)</p>

        <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>

        <ol class=words>

          <li class=word>
            <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
            <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
          </li>

          <li class=word>
            <span class=w-m lang=ctm>his</span>
            <span class=w-gl><abbr title=responsive>resp</abbr></span>
          </li>

          <li class=word>
            <span class=w-m lang=ctm>heːčt‑iʔi</span>
            <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
          </li>

        </ol>

        <p class=tln>an eagle met him</p>

        <p class=ex-source>Swadesh 1939b: A1b.1</p>

      </li>

      <li class=ex>
        <p class=ex-header>Menominee (Algonquian)</p>
        <ol class=subexamples>
          <li><p><i class=txn lang=mez>pāpaehcen</i> <q class=tln>he, she, it (anim.) falls</q> (AI)</p></li>
          <li><p><i class=txn lang=mez>pāpaehnaen</i> <q clas=translation>it (inan.) falls</q> (II)</p></li>
        </ol>
      </li>

      <li class=ex>
        <p class=ex-header>Menominee (Algonquian)</p>
        <ol class=subexamples>
          <li><p><i class=txn lang=mez>na͞ewa͞ew</i> <q class=tln>s/he sees him, her, it (anim.)</q> (TA)</p></li>
          <li><p><i class=txn lang=mez>na͞emwah</i> <q class=tln>s/he sees it (inan.)</q> (TI)</p></li>
        </ol>
      </li>

    </ol>

  </section>

</article>

Source: ../components/emphasis/emphasis.less, line 1

2.5 Emphasis

These classes are intended for use in prose. The emphasis styles applied within interlinear examples are slightly different, and are applied with the .igl or .interlinear classes instead. For prose emphasis, you probably want to add style rules that are scoped to the paragraph or other containing element, like this: p em { .em; }.

Example

The word qatin in the Chitimacha phrase kix qatin horse means big.

<p>The word <i class=txn lang=ctm>qatin</i> in the Chitimacha phrase <i class=txn lang=ctm>kix <b class=em>qatin</b></i> <q class=tln>horse</q> means <q class=tln>big</q>.</p>

Source: ../components/example-header/example-header.less, line 1

2.6 Example Header

Examples and interlinear glossed examples may have headers containing information about the example (such as the language of the example). See the example component for a demonstration of a header being used in an example.

Source: ../components/example/example.less, line 3

2.7 Example

Linguistic examples may contain any type of linguistic data. Each example should be given the .ex class. To add numbering to examples, wrap them in an <ol class=examples> tag and place each example inside a <li class=ex> tag. See the examples component for more information. <b> and <em> tags within examples are styled with the .em class by default (see the example emphasis component).

Example

Abstract nouns: ‑win / ‑owin

kisēwātisi be kind + ‑win = kisēwātisiwin kindness

nēhiyawē speak Cree + ‑win = nēhiyawēwin Cree language

ākayāsīmo speak English + ‑win = ākayāsīmowin English language

māsihito wrestle one another + ‑win = māsihitowin wrestling

sākihito love one another + ‑win = sākihitowin love

kihcēyihtam s/he has respect for it + ‑owin = kihcēyihtamowin respect

Okimāsis. 2018. Cree: Language of the Plains / nehiyawewin: paskwāwi-pīkiskwēwin

<div class='ex demo'>

  <p class=ex-header>Abstract nouns: <i class=txn lang=crk>‑win</i> / <i class=txn lang=crk>‑owin</i></p>

  <p><i class=txn lang=crk>kisēwātisi</i> <q class=tln>be kind</q> + <i class=txn lang=crk>‑win</i> = <i class=txn lang=crk>kisēwātisiwin</i> <q class=tln>kindness</q></p>
  <p><i class=txn lang=crk>nēhiyawē</i> <q class=tln>speak Cree</q> + <i class=txn lang=crk>‑win</i> = <i class=txn lang=crk>nēhiyawēwin</i> <q class=tln>Cree language</q></p>
  <p><i class=txn lang=crk>ākayāsīmo</i> <q class=tln>speak English</q> + <i class=txn lang=crk>‑win</i> = <i class=txn lang=crk>ākayāsīmowin</i> <q class=tln>English language</q></p>
  <p><i class=txn lang=crk>māsihito</i> <q class=tln>wrestle one another</q> + <i class=txn lang=crk>‑win</i> = <i class=txn lang=crk>māsihitowin</i> <q class=tln>wrestling</q></p>
  <p><i class=txn lang=crk>sākihito</i> <q class=tln>love one another</q> + <i class=txn lang=crk>‑win</i> = <i class=txn lang=crk>sākihitowin</i> <q class=tln>love</q></p>
  <p><i class=txn lang=crk>kihcēyihtam</i> <q class=tln>s/he has respect for it</q> + <i class=txn lang=crk>‑owin</i> = <i class=txn lang=crk>kihcēyihtamowin</i> <q class=tln>respect</q></p>

  <p class=ex-source>Okimāsis. 2018. <cite>Cree: Language of the Plains / nehiyawewin: paskwāwi-pīkiskwēwin</cite></p>

</div>

Source: ../components/example-source/example-source.less, line 1

2.7.1 Example Source

Examples may have a source, containing information about where the example is from (the speaker, location in the text, geographic region, etc.). See the example component for a demonstration of a source being used in an example.

Source: ../components/examples/examples.less, line 1

2.8 Examples

A set of one or more linguistic examples. By convention, examples in linguistics publications are numbered (1), (2), (3), etc. To number the examples, wrap them in an <ol class=examples> tag, and place each example in a <li class=ex> element. All content within an example displays in a serif Unicode font by default; you may need to override the font family for individual elements. <b> and <em> tags within examples are styled with the .em class by default (see the example emphasis component).

Example

  1. Plains Cree (Algonquian)

    asam feed him/her/it
    asām a snowshoe
    askihk a pail
    askīhk on the land/earth

    Okimāsis. 2018. Cree: Language of the Plains / nehiyawewin: paskwāwi-pīkiskwēwin

  2. Chitimacha (isolate)

    siksink his heːčtiʔi

    1. siksi‑nk eagle‑??
    2. his resp
    3. heːčt‑iʔi call‑nf;sg

    an eagle met him

    Swadesh 1939b: A1b.1

  3. Menominee (Algonquian)

    1. pāpaehcen he, she, it (anim.) falls (AI)

    2. pāpaehnaen it (inan.) falls (II)

  4. Menominee (Algonquian)

    1. na͞ewa͞ew s/he sees him, her, it (anim.) (TA)

    2. na͞emwah s/he sees it (inan.) (TI)

<ol class=examples style="counter-reset: examples;">

  <li class=ex>

    <p class=ex-header>Plains Cree (Algonquian)</p>

    <table>
      <tr>
        <td class=txn lang=crk>asam</td>
        <td class=tln>feed him/her/it</td>
      </tr>
      <tr>
        <td class=txn lang=crk>asām</td>
        <td class=tln>a snowshoe</td>
      </tr>
      <tr>
        <td class=txn lang=crk>askihk</td>
        <td class=tln>a pail</td>
      </tr>
      <tr>
        <td class=txn lang=crk>askīhk</td>
        <td class=tln>on the land/earth</td>
      </tr>
    </table>

    <p class=ex-source>Okimāsis. 2018. <cite>Cree: Language of the Plains / nehiyawewin: paskwāwi-pīkiskwēwin</cite></p>

  </li>

  <li class='ex igl'>

    <p class=ex-header>Chitimacha (isolate)</p>

    <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>

    <ol class=words>

      <li class=word>
        <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
        <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
      </li>

      <li class=word>
        <span class=w-m lang=ctm>his</span>
        <span class=w-gl><abbr title=responsive>resp</abbr></span>
      </li>

      <li class=word>
        <span class=w-m lang=ctm>heːčt‑iʔi</span>
        <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
      </li>

    </ol>

    <p class=tln>an eagle met him</p>

    <p class=ex-source>Swadesh 1939b: A1b.1</p>

  </li>

  <li class=ex>
    <p class=ex-header>Menominee (Algonquian)</p>
    <ol class=subexamples>
      <li><p><i class=txn lang=mez>pāpaehcen</i> <q class=tln>he, she, it (anim.) falls</q> (AI)</p></li>
      <li><p><i class=txn lang=mez>pāpaehnaen</i> <q class=tln>it (inan.) falls</q> (II)</p></li>
    </ol>
  </li>

  <li class=ex>
    <p class=ex-header>Menominee (Algonquian)</p>
    <ol class=subexamples>
      <li><p><i class=txn lang=mez>na͞ewa͞ew</i> <q class=tln>s/he sees him, her, it (anim.)</q> (TA)</p></li>
      <li><p><i class=txn lang=mez>na͞emwah</i> <q class=tln>s/he sees it (inan.)</q> (TI)</p></li>
    </ol>
  </li>

</ol>

Source: ../components/examples/examples.less, line 10

2.8.1 --example-indent

How far to indent each example. Controlling this value is useful when the number of examples on your page reaches multiple place values. Default: 1.5em.

Example

  1. This is an example with --example-indent set to 1.5em.
  2. This is an example with --example-indent set to 2.5em.
<ol class=examples style="counter-reset: examples 100;">
  <li class='ex A' style="--example-indent: 1.5em;">This is an example with <code>--example-indent</code> set to <code>1.5em</code>.</li>
  <li class='ex B' style="--example-indent: 2.5em;">This is an example with <code>--example-indent</code> set to <code>2.5em</code>.</li>
</ol>

Source: ../components/examples/examples.less, line 23

2.8.2 --example-margin

How much spacing to place before and after each example in the list. Defaults to 1em.

Source: ../components/gloss/gloss.less, line 1

2.9 Grammatical Gloss

Grammatical glosses, displayed in small caps. Best practice is that grammatical glosses should be contained in <abbr class=gl> tags.

Example

In this text, the gloss plact is used to mean pluractional.

<p>In this text, the gloss <abbr class=gl title=pluractional>plact</abbr> is used to mean <q class=tln>pluractional</q>.</p>

Source: ../components/inline-example/inline-example.less, line 4

2.10 Inline Example

Inline examples within prose are displayed in italics, as is the convention in linguistics. Best practice is to wrap inline examples in the <i class=inex lang={ISO code}> tag, and ensure that you include the correct ISO 639-3 code in the lang attribute. Since inline examples are a kind of transcription, they display in a Unicode font by default. <b> and <em> tags within inline examples are styled with the .em class by default (see the example emphasis component).

Example

The Chitimacha word kix qatin horse literally means big dog.

<p>The Chitimacha word <i class=inex lang=ctm>kix qatin</i> <q class=tln>horse</q> literally means <q class=tln>big dog</q>.</p>

Source: ../components/interlinear/interlinear.less, line 7

2.11 Interlinear Gloss

An interlinear glossed example or utterance. All content contained within an interlinear example is displayed in a serif Unicode font by default; you may need to override the font family for individual elements. In addition to transcription (<p class=txn>) and translation (<p class=tln>) lines, you can choose to add analysis lines divided into words (<ol class=words>) and/or morphemes (<ol class=morphemes>). Be sure to add the lang attribute to any lines containing transcriptions of data in the target language. Analysis lines can be <span>s or <div>s according to your preference. If one word / morpheme has an analysis line, all of the words / morphemes in the example should have those same analysis lines, even if those tags are sometimes empty. It is highly recommended that glosses be divided by non-breaking hyphens (U+2011, or &#8209; in HTML) rather than regular hyphens so that glosses do not break across lines. Several CSS variables are made available for you to customize the appearance of the interlinear examples.

Example

Chitimacha (isolate)

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

Swadesh 1939b: A1b.1

Menominee (Algonquian)

pemētaehkipew

  1. paemet‑ crosswise initial
  2. ‑aehkw‑ face medial
  3. ‑ape sit final

S/he sits sideways.

Mohawk (Iroquoian)

  1. wa’óhteron’ne’ wa’‑io‑hteron‑’n‑e‑’ fac‑n.pat‑be.afraid‑inch‑ep‑pct
  2. nòn:wa nonhwa now
  3. ne’ ne’ it.is
  4. kí:ken kiken this
  5. enkahón:io’ne’ en‑ka‑honw‑o‑’n‑e‑’ fut‑n.agt‑vessel‑be.in.water‑inch‑ep‑pct it will become immersed
  6. tho tho there there
  7. enhaia’tarátie’ en‑ha‑ia’t‑a‑r‑ati‑e’ fut‑m.sg.agt‑body‑jr‑be.in‑prog‑st he will be going along in it

She became afraid that the ship would sink and that he would go with it.

L Jacob (Ks), SM Montour (Ks), KH Nicholas (Ks)

<div class=igl>

  <p class=ex-header>Chitimacha (isolate)</p>

  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>

  <ol class=words>

    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>

    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>

    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>

  </ol>

  <p class=tln>an eagle met him</p>

  <p class=ex-source>Swadesh 1939b: A1b.1</p>

</div>

<div class=igl>

  <p class=ex-header>Menominee (Algonquian)</p>

  <p class=txn lang=mez>pemētaehkipew</p>

  <ol class=morphemes>

    <li class=morpheme>
      <span class=m-txn lang=mez>paemet‑</span>
      <span class=m-gl>crosswise</span>
      <span class=m-gl><abbr title=initial>initial</abbr></span>
    </li>

    <li class=morpheme>
      <span class=m-txn lang=mez>‑aehkw‑</span>
      <span class=m-gl>face</span>
      <span class=m-gl><abbr title=medial>medial</abbr></span>
    </li>

    <li class=morpheme>
      <span class=m-txn lang=mez>‑ape</span>
      <span class=m-gl>sit</span>
      <span class=m-gl><abbr title=final>final</abbr></span>
    </li>

  </ol>

  <p class=tln>S/he sits sideways.</p>

</div>

<div class=igl>

  <p class=ex-header>Mohawk (Iroquoian)</p>

  <ol class=words>

    <li class=word>
      <span class=w-txn lang=moh>wa’óhtero<b>n’</b>ne’</span>
      <span class=w-m lang=moh>wa’‑io‑hteron‑<b>’n</b>‑e‑’</span>
      <span class=w-gl><abbr title=factual>fac</abbr>‑<abbr title=neuter>n</abbr>.<abbr title=patient>pat</abbr>‑be.afraid‑<b><abbr title=inchoative>inch</abbr></b>‑<abbr title=epenthetic>ep</abbr>‑<abbr title=punctual>pct</abbr></span>
      <span class=w-tln></span>
    </li>

    <li class=word>
      <span class=w-txn lang=moh>nòn:wa</span>
      <span class=w-m lang=moh>nonhwa</span>
      <span class=w-gl>now</span>
      <span class=w-tln></span>
    </li>

    <li class=word>
      <span class=w-txn lang=moh>ne’</span>
      <span class=w-m lang=moh>ne’</span>
      <span class=w-gl>it.is</span>
      <span class=w-tln></span>
    </li>

    <li class=word>
      <span class=w-txn lang=moh>kí:ken</span>
      <span class=w-m lang=moh>kiken</span>
      <span class=w-gl>this</span>
      <span class=w-tln></span>
    </li>

    <li class=word>
      <span class=w-txn lang=moh>enkahón:io<b>’n</b>e’</span>
      <span class=w-m lang=moh>en‑ka‑honw‑o‑<b>’n</b>‑e‑’</span>
      <span class=w-gl><abbr title=future>fut</abbr>‑<abbr title=neuter>n</abbr>.<abbr title=agent>agt</abbr>‑vessel‑be.in.water‑<b><abbr title=inchoative>inch</abbr></b>‑<abbr title=epenthetic>ep</abbr>‑<abbr title=punctual>pct</abbr></span>
      <span class=w-tln>it will become immersed</span>
    </li>

    <li class=word>
      <span class=w-txn lang=moh>tho</span>
      <span class=w-m lang=moh>tho</span>
      <span class=w-gl>there</span>
      <span class=w-tln>there</span>
    </li>

    <li class=word>
      <span class=w-txn lang=moh>enhaia’tarátie’</span>
      <span class=w-m lang=moh>en‑ha‑ia’t‑a‑r‑ati‑e’</span>
      <span class=w-gl><abbr title=future>fut</abbr>‑<abbr title=masculine>m</abbr>.<abbr title=singular>sg</abbr>.<abbr title=agent>agt</abbr>‑body‑<abbr title='stem joiner'>jr</abbr>‑be.in‑<abbr title=progressive>prog</abbr>‑<abbr title=stative>st</abbr></span>
      <span class=w-tln>he will be going along in it</span>
    </li>

  </ol>

  <p class=tln>She became afraid that the ship would sink and that he would go with it.</p>

  <p class=ex-source>L Jacob (Ks), SM Montour (Ks), KH Nicholas (Ks)</p>

</div>

Source: ../components/interlinear/interlinear.less, line 17

2.11.1 --em-color

Set the color of emphasized text by giving a value to the --em-color variable.

Example

.igl { --em-color: red; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

<div class=igl style="--em-color: red;">
  <p class=ex-header><code>.igl { --em-color: red; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>

Source: ../components/interlinear/interlinear.less, line 91

2.11.2 --igl-horizontal-spacing

The amount of space to place between words / morphemes in the analysis lines. Default: 1.25em.

Example

.igl { --igl-horizontal-spacing: 0.25em; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

.igl { --igl-horizontal-spacing: 1.25em; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

<div class=igl style="--igl-horizontal-spacing: 0.25em;">
  <p class=ex-header><code>.igl { --igl-horizontal-spacing: 0.25em; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>
<div class=igl style="--igl-horizontal-spacing: 1.25em;">
  <p class=ex-header><code>.igl { --igl-horizontal-spacing: 1.25em; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>

Source: ../components/interlinear/interlinear.less, line 44

2.11.3 --igl-indent

The amount to indent analysis lines. The transcription and translation lines (the first and last lines) will be left unindented. Default: 0em.

Example

.igl { --igl-indent: 0em; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

.igl { --igl-indent: 1em; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

<div class=igl style="--igl-indent: 0em;">
  <p class=ex-header><code>.igl { --igl-indent: 0em; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>
<div class=igl style="--igl-indent: 1em;">
  <p class=ex-header><code>.igl { --igl-indent: 1em; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>

Source: ../components/interlinear/interlinear.less, line 138

2.11.4 --igl-vertical-spacing

The amount of space to place above and below the words / morphemes in the analysis lines. Default: 0.25em.

Example

.igl { --igl-vertical-spacing: 0em; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

.igl { --igl-vertical-spacing: 1em; }

siksink his heːčtiʔi

  1. siksi‑nk eagle‑??
  2. his resp
  3. heːčt‑iʔi call‑nf;sg

an eagle met him

<div class=igl style="--igl-vertical-spacing: 0em;">
  <p class=ex-header><code>.igl { --igl-vertical-spacing: 0em; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>
<div class=igl style="--igl-vertical-spacing: 1em;">
  <p class=ex-header><code>.igl { --igl-vertical-spacing: 1em; }</code></p>
  <p class=txn lang=ctm>siksi<em>nk</em> his heːčtiʔi</p>
  <ol class=words>
    <li class=word>
      <span class=w-m lang=ctm>siksi‑<em>nk</em></span>
      <span class=w-gl>eagle‑<abbr title=unknown>??</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>his</span>
      <span class=w-gl><abbr title=responsive>resp</abbr></span>
    </li>
    <li class=word>
      <span class=w-m lang=ctm>heːčt‑iʔi</span>
      <span class=w-gl>call‑<abbr title=non-first>nf</abbr>;<abbr title=singular>sg</abbr></span>
    </li>
  </ol>
  <p class=tln>an eagle met him</p>
</div>

Source: ../components/interlinear/interlinear.less, line 199

2.11.5 Example Emphasis

Emphasis is indicated using either <em> or <b> tags (both are semantically valid for this use case), or the .em class. See the example emphasis component.

Source: ../components/interlinear/interlinear.less, line 209

2.11.6 Example Header

Example headers (containing information about the interlinear example) are given the .ex-header class and styled with an underline. See the example header component for a demonstration of an example header in use.

Source: ../components/interlinear/interlinear.less, line 189

2.11.7 Grammatical Glosses

Grammatical glosses are displayed in small caps and indicated with either the .gl or .gloss classes, or by wrapping the gloss in an <abbr> tag. Best practice is to include a title attribute on grammatical glosses, indicating the term that the gloss stands for; this allows the user to hover over the gloss for its definition. See the grammatical gloss component.

Source: ../components/orthographic/orthographic.less, line 3

2.12 Orthographic Transcription

Used for orthographic transcriptions of some data, such as when discussing a writing system. Wrapped in angle brackets by default. Adjust the space between the orthographic transcription and the surrounding brackets using the --txn-padding variable.

Example

The Plains Cree word tânisi means hello. In Western Cree Syllabics, it is written as ᑖᓂᓯ.

  • --txn-padding: 0em: ᑖᓂᓯ
  • --txn-padding: 0.15em: ᑖᓂᓯ
  • --txn-padding: 0.5em: ᑖᓂᓯ
<p>The Plains Cree word <i class=txn>tânisi</i> means <q class=tln>hello</q>. In Western Cree Syllabics, it is written as <span class=ortho>ᑖᓂᓯ</span>.</p>

<ul>
  <li><code>--txn-padding: 0em</code>: <span class=ortho style="--txn-padding: 0em;">ᑖᓂᓯ</span></li>
  <li><code>--txn-padding: 0.15em</code>: <span class=ortho style="--txn-padding: 0.15em;">ᑖᓂᓯ</span></li>
  <li><code>--txn-padding: 0.5em</code>: <span class=ortho style="--txn-padding: 0.5em;">ᑖᓂᓯ</span></li>
</ul>

Source: ../components/phonemic/phonemic.less, line 3

2.13 Phonemic Transcription

Used for phonemic transcriptions of data, displayed between slashes //. Adjust the space between the phonemic transcription and the surrounding brackets using the --txn-padding variable.

Example

The Mohawk word for hello is written as shé꞉kon and pronounced as ˈshɛːɡũ.

  • --txn-padding: 0em: ˈshɛːɡũ
  • --txn-padding: 0.15em: ˈshɛːɡũ
  • --txn-padding: 0.5em: ˈshɛːɡũ
<p>The Mohawk word for <q class=tln>hello</q> is written as <span class=ortho>shé꞉kon</span> and pronounced as <span class=phon>ˈshɛːɡũ</span>.</p>

<ul>
  <li><code>--txn-padding: 0em</code>: <span class=phon style="--txn-padding: 0em;">ˈshɛːɡũ</span></li>
  <li><code>--txn-padding: 0.15em</code>: <span class=phon style="--txn-padding: 0.15em;">ˈshɛːɡũ</span></li>
  <li><code>--txn-padding: 0.5em</code>: <span class=phon style="--txn-padding: 0.5em;">ˈshɛːɡũ</span></li>
</ul>

Source: ../components/phonetic/phonetic.less, line 3

2.14 Phonetic Transcription

Used for phonetic transcriptions of data, displayed between square brackets []. Adjust the space between the phonetic transcription and the surrounding brackets using the --txn-padding variable.

Example

pɐɐ́n̪.d̪ɐm paántam banana

  • --txn-padding: 0em: pɐɐ́n̪.d̪ɐm
  • --txn-padding: 0.15em: pɐɐ́n̪.d̪ɐm
  • --txn-padding: 0.5em: pɐɐ́n̪.d̪ɐm
<p><span class=fon>pɐɐ́n̪.d̪ɐm</span> <span class=phon>paántam</span> <q class=tln>banana</q></p>

<ul>
  <li><code>--txn-padding: 0em</code>: <span class=fon style="--txn-padding: 0em;">pɐɐ́n̪.d̪ɐm</span></li>
  <li><code>--txn-padding: 0.15em</code>: <span class=fon style="--txn-padding: 0.15em;">pɐɐ́n̪.d̪ɐm</span></li>
  <li><code>--txn-padding: 0.5em</code>: <span class=fon style="--txn-padding: 0.5em;">pɐɐ́n̪.d̪ɐm</span></li>
</ul>

Source: ../components/transcription/transcription.less, line 1

2.15 Transcription

Any written representation of speech or sign. Always be sure to include the lang attribute on transcriptions. <b> and <em> tags within transcriptions are styled with the .em class by default (see the example emphasis component). Whenever possible, prefer a more specific type of transcription: .ortho, .phon, or .fon.

Example

łééchąąʼí dog

łį́į́ʼ pet

<p><span class=txn lang=nav>łééchąąʼí</span> <q class=tln>dog</q></p>
<p><span class=txn lang=nav>łį́į́ʼ</span> <q class=tln>pet</q></p>

Source: ../components/transcription/transcription.less, line 11

2.15.1 --txn-padding

The amount of padding to use between transcriptions and the surrounding brackets (//, [], and ⟨⟩).

Source: ../components/translation/translation.less, line 1

2.16 Translation

Translations in single quotes. While the HTML specification states that the <q> may only be used when you're quoting a source, it nonetheless may be acceptable to use a <q> tag for translations in technical linguistics texts. Browsers will add double quotes to <q> tags by default, providing a convenient fallback if your CSS fails to load.

Example

The Chitimacha word kix qatin horse literally means big dog.

<p>The Chitimacha word <i class=inex lang=ctm>kix qatin</i> <q class=tln>horse</q> literally means <q class=tln>big dog</q>.</p>