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 |
| No Data | b. | subject2 | verb | preposition
Small caps |
article | noun |
| No Data | 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
| example | word | here |
| (1) | a. | John | goes | to | the | store1 |
| b. | subject2 | verb |
preposition Small caps |
article | noun | |
| c. | “John goes to the store.” | |||||
Sign Language Gloss Template HTML
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 */
.tabletop,
.interlinear {
border-collapse: collapse;
width: 100%;
}
.tabletop td,
.interlinear td {
border: 1px solid #ededed; /* Delete ‘1px solid #’ and replace with ‘none’ when glosses are all complete. */
padding: 8px;
}
/* Table top specific styling */
.list1top,
.list1 {
width: 3%;
text-align: center;
vertical-align: middle;
}
.list2top,
.list2 {
width: 2.5%;
}
.spacertop,
.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;
}
/* Black overline for sign language tables only */
.glossline {
border-top: 1.5px solid black;
width: 100%;
}
