Gloss Template HTML and CSS
Kristy Lacroix
These HTML templates and the accompanying CSS stylesheet facilitate the presentation of glosses in online linguistic documentation. They offer a clean, organized structure using basic HTML tables with standard row and data cell tags, a structure which ensures accessibility for screen readers and keyboard navigation without needing the header cells or captions required for accessibility in standard use of HTML tables. The templates are easily customizable to fit various linguistic projects, and the stylesheet provides a cohesive and consistent gloss design across the templates.
Gloss Template
| (1) | a. | John | goes | to | the | store1 |
| b. | subject2 | verb | preposition
Small caps |
article | noun | |
| c. | “John goes to the store.” | |||||
Gloss Template HTML
<code>
<div class=”glosscontainer”>
<table class=”interlinear”>
<tbody>
<tr>
<td class=”list1″>(1)</td>
<td class=”list2″>a.</td>
<td class=”spacer”>John</td>
<td class=”spacer”>goes</td>
<td class=”spacer”>to</td>
<td class=”spacer”>the</td>
<td class=”spacer”>store<sub>1</sub></td>
</tr>
<tr>
<td><span style=”color: #fff;”>No Data</span></td>
<td class=”list2″>b.</td>
<td class=”spacer”>subject<sub>2</sub></td>
<td class=”spacer”>verb</td>
<td class=”spacer”>preposition
<p class=”small-caps”>Small caps</p>
</td>
<td class=”spacer”>article</td>
<td class=”spacer”>noun</td>
</tr>
<tr>
<td><span style=”color: #fff;”>No Data</span></td>
<td class=”list2″>c.</td>
<td colspan=”5″>”John goes to the store.”</td>
</tr>
</tbody>
</table>
</div>
</code>
Sign Language Gloss Template
This is a sign language gloss table. Some table cells are visually empty to support alignment.
Non-manual signals such as “re” (raised eyebrows) and “hn” (head nod) are described in screen-reader-only rows.
English translations follow each gloss group.
| Non-manual signal “re” (raised eyebrows) applies from INDEX₂ through LONG! | |||||
| re | |||||
| (37) | a. | INDEX2 | BITE-BAR | LONG! | |
| ‘Bite the bar for a long time!’ | |||||
| The non-manual signal ‘hn’ (head nod) applies from INDEX through BITE! | |||||
| hn | |||||
| The non-manual signal ‘re’ (raised eyebrows) applies from PLEASE through BITE! | |||||
| re | |||||
| b. | PLEASE | INDEX2 | BITE! | ||
| ‘Please, bite it!’ | |||||
Sign Language Gloss Template HTML
<code>
<p id=”gloss-table-desc1″ class=”sr-only”>This is a sign language gloss table. Some table cells are visually empty to support alignment. Non-manual signals such as “re” (raised eyebrows) and “hn” (head nod) are described in screen-reader-only rows. English translations follow each gloss group.</p>
<div class=”glosscontainer”>
<table class=”interlinear-SL” aria-describedby=”gloss-table-desc”>
<tbody>
<!– NMS RE group 1 –>
<tr class=”sr-only”>
<td colspan=”6″>Non-manual signal “re” (raised eyebrows) applies from INDEX₂ through LONG!</td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td class=”non-manual cell-border” colspan=”4″>re</td>
</tr>
<tr>
<td class=”list1″>(37)</td>
<td class=”list2″>a.</td>
<td class=”spacer-left”>INDEX<sub>2</sub></td>
<td class=”spacer-center” colspan=”2″>BITE-BAR</td>
<td class=”spacer-right”>LONG!</td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td colspan=”4″>‘Bite the bar for a long time!’</td>
</tr>
<!– NMS HN group –>
<tr class=”sr-only”>
<td colspan=”6″>The non-manual signal ‘hn’ (head nod) applies from INDEX through BITE!</td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td class=”spacer” aria-hidden=”true”></td>
<td class=”non-manual cell-border” colspan=”2″>hn</td>
<td aria-hidden=”true”></td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td class=”spacer” aria-hidden=”true”></td>
<td class=”spacer” aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
</tr>
<!– NMS RE group 2 –>
<tr class=”sr-only”>
<td colspan=”6″>The non-manual signal ‘re’ (raised eyebrows) applies from PLEASE through BITE!</td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td class=”non-manual cell-border” colspan=”3″>re</td>
<td aria-hidden=”true”></td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td class=”list2″>b.</td>
<td class=”spacer-left”>PLEASE</td>
<td class=”spacer-center”>INDEX<sub>2</sub></td>
<td class=”spacer-right”>BITE!</td>
<td class=”spacer” aria-hidden=”true”></td>
</tr>
<tr>
<td aria-hidden=”true”></td>
<td aria-hidden=”true”></td>
<td colspan=”4″>‘Please, bite it!’</td>
</tr>
</tbody>
</table>
</div>
CSS Master Stylesheet for both templates
/* CSS Document */
/* Container for all elements */
.glosscontainer {
width: 80%; /* Adjust this width up to 100%, whatever your preference */
margin-left: auto; /* Delete if you don’t want the tables centered */
margin-right: auto; /* Delete if you don’t want the tables centered */
}
/* Table styling */
.interlinear {
border-collapse: collapse;
width: 100%;
}
.interlinear td {
border: 1px solid #ededed; /* Delete ‘1px solid #’ and replace with ‘none’ when glosses are all complete. */
padding: 8px;
}
/* Table top specific styling */
.list1 {
width: 3%;
text-align: center;
vertical-align: middle;
}
.list2 {
width: 2.5%;
}
.spacer {
width: 12%;
text-align: right; /* Change to ‘center’ in .spacer if needed */
vertical-align: middle;
}
/* Inline container styling */
.inline-container {
display: flex;
flex-wrap: nowrap; /* Prevents the items from wrapping */
align-items: center; /* Vertically centers the content in the container */
justify-content: center; /* Horizontally centers the content in the container */
}
.inline-container p {
margin-right: 10px; /* Optional: Adds some space between the paragraphs */
}
/* Sets italics for the bottom row */
.interlinear tr:last-child {
font-style: italic;
}
/* Small caps styling */
.small-caps {
font-variant: small-caps;
padding-top: 0;
margin: 0;
}
/* For sign language glosses ONLY*/
.interlinear-SL {
border-collapse: collapse;
width: 100%; /* Recommend to leave at 100% as different SL glosses require different widths for optimum alignment. Note that some SL glosses have custom widths set in the HTML code and need to be adjusted there. */
}
td.cell-border {
border-bottom: solid 4px; /* Creates the border at the bottom of cells */
}
td.spacer-left {
text-align: left; /* Controls text alignment in td cell */
vertical-align: middle;
}
td.spacer-center {
text-align: center; /* Controls text alignment in td cell */
vertical-align: middle;
}
td.spacer-right {
text-align: right; /* Controls text alignment in td cell */
vertical-align: middle;
}
.interlinear-SL td {
padding-top: 5px; /* Controls spacing between cells to prevent collapse */
padding-bottom: 5px;
}
td.non-manual {
text-align: right; /* Alignment for non-manual ‘hn’ and ‘re’ elements */
vertical-align: middle;
}
/* Screenreader labels for ‘hn’ and ‘re’ elements */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* End of sign language gloss styling*/
