Gloss Template HTML and CSS
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
| re | |||||
| (37) | a. | INDEX2 | BITE-BAR | LONG! | |
| ‘Bite the bar for a long time!’ | |||||
| hn | |||||
| re | |||||
| b. | PLEASE | INDEX2 | BITE! | ||
| ‘Please, bite it!’ | |||||
Sign Language Gloss Template HTML
<code>
CSS Master Stylesheet for both templates
/* CSS Document */
/* Container for all elements */
.glosscontainer {
width: 50%; /* 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: 50%; /* Keeps table at a optimal width – can be adjusted */
}
td.cell-border {
border-top: solid 4px; /* Creates the border above 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;
}
.non-manual {
text-align: right; /* Alignment for non-manual ‘hn’ and ‘re’ elements */
}
