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

<code>
<div class=”glosscontainer”>
<table class=”tabletop”>
<tr>
<td class=”list1top”></td>
<td class=”list2top”></td>
<td class=”spacertop”></td>
<td class=”spacertop”>example</td>
<td class=”spacertop”></td>
<td class=”spacertop”>word</td>
<td class=”spacertop”>here</td>
</tr>
</table>
<hr class=”glossline” />
<table class=”interlinear”>
<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></td>
<td class=”list2″>b.</td>
<td class=”spacer”>subject<sub>2</sub></td>
<td class=”spacer”>verb</td>
<td class=”spacer”>
<!– This div will keep the p tags together –>
<div class=”inline-container”>
<p>preposition</p>
<p class=”small-caps”>Small caps</p>
</div>
</td>
<td class=”spacer”>article</td>
<td class=”spacer”>noun</td>
</tr>
<tr>
<td></td>
<td class=”list2″>c.</td>
<td colspan=”5″>”John goes to the store.”</td>
</tr>
</table>
</div>
</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 */

.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%;
}

License

Share This Book