Source: ../components/components.less, line 1
2 Components
Styling for linguistic components.
Source: ../components/components.less, line 1
Styling for linguistic components.
Source: ../components/abbreviation/abbreviation.less, line 1
Styling for inline abbreviations (not grammatical glosses).
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
The .cite
class is used for titles of publications, etc. Best practice is to use a <cite>
tag as well.
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
The .dfn
class is used for terms being defined. Best practice is to use a <dfn>
tag as well.
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
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.
Daniel W. Hieber
University of California, Santa Barbara
This paper introduces the field of Digital Linguistics (DLx). The Navajo word łééchąąʼí dog
is an example of a retronym.
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
Chitimacha (isolate)
siksink his heːčtiʔi
an eagle met him
Swadesh 1939b: A1b.1
Menominee (Algonquian)
pāpaehcen he, she, it (anim.) falls
(AI)
pāpaehnaen it (inan.) falls
(II)
Menominee (Algonquian)
na͞ewa͞ew s/he sees him, her, it (anim.)
(TA)
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
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; }
.
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
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
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).
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
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
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).
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
Chitimacha (isolate)
siksink his heːčtiʔi
an eagle met him
Swadesh 1939b: A1b.1
Menominee (Algonquian)
pāpaehcen he, she, it (anim.) falls
(AI)
pāpaehnaen it (inan.) falls
(II)
Menominee (Algonquian)
na͞ewa͞ew s/he sees him, her, it (anim.)
(TA)
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
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-indent
set to 1.5em
.--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
How much spacing to place before and after each example in the list. Defaults to 1em.
Source: ../components/gloss/gloss.less, line 1
Grammatical glosses, displayed in small caps. Best practice is that grammatical glosses should be contained in <abbr class=gl>
tags.
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
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).
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
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 ‑
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.
Chitimacha (isolate)
siksink his heːčtiʔi
an eagle met him
Swadesh 1939b: A1b.1
Menominee (Algonquian)
pemētaehkipew
S/he sits sideways.
Mohawk (Iroquoian)
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
Set the color of emphasized text by giving a value to the --em-color
variable.
.igl { --em-color: red; }
siksink his heːčtiʔi
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
The amount of space to place between words / morphemes in the analysis lines. Default: 1.25em
.
.igl { --igl-horizontal-spacing: 0.25em; }
siksink his heːčtiʔi
an eagle met him
.igl { --igl-horizontal-spacing: 1.25em; }
siksink his heːčtiʔi
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
The amount to indent analysis lines. The transcription and translation lines (the first and last lines) will be left unindented. Default: 0em
.
.igl { --igl-indent: 0em; }
siksink his heːčtiʔi
an eagle met him
.igl { --igl-indent: 1em; }
siksink his heːčtiʔi
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
The amount of space to place above and below the words / morphemes in the analysis lines. Default: 0.25em
.
.igl { --igl-vertical-spacing: 0em; }
siksink his heːčtiʔi
an eagle met him
.igl { --igl-vertical-spacing: 1em; }
siksink his heːčtiʔi
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
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
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
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
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.
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
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.
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
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.
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
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
.
łéé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
The amount of padding to use between transcriptions and the surrounding brackets (//
, []
, and ⟨⟩
).
Source: ../components/translation/translation.less, line 1
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.
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>