Skip to content

Commit

Permalink
refactoring: draw common html structure for font examples from js tem…
Browse files Browse the repository at this point in the history 
…plate string.
  • Loading branch information
Dierk Koenig committed Oct 26, 2024
1 parent fb0454d commit 22621ec
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 153 deletions.
36 changes: 5 additions & 31 deletions docs/font/JetBrains_Mono/FontJetBrainsMonoExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,12 @@
<body>

<h1>H1 JetBrains Mono </h1>
<h2>H2 Style Examples from variable font settings</h2>

<p>This should show all the font features that are important in the Kolibri context.</p>
<script src="../example-template.js">
</script>
<script>
document.writeln(HTML_TEMPLATE);
</script>

<dl>
<dt>regular</dt>
<dd>
situs vilate in isis ab ernit.</dd>

<dt>lighter</dt>
<dd style="font-weight: lighter">
situs vilate in isis ab ernit.</dd>

<dt>italic</dt>
<dd style="font-style: italic">
situs vilate in isis ab ernit.</dd>

<dt>animate on hover</dt>
<dd class="animate_on_hover">
situs vilate in isis ab ernit. &lt;- try mouse over here !</dd>

<dt>big O vs non-slashed zero </dt>
<dd >
big OOO vs zero 000</dd>

<dt>numbers with no font support </dt>
<dd >
111 in running text <br>000 in running text </dd>

<dt>numeric font support </dt>
<dd class="font_numeric">
111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
</dl>
</body>
</html>
36 changes: 6 additions & 30 deletions docs/font/Roboto_Slab/FontRobotoSlabExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,14 @@
<body>

<h1>H1 Roboto Slab </h1>
<h2>H2 Style Examples from variable font settings</h2>

<p>This should show all the font features that are important in the Kolibri context.</p>
<blockquote>Numeric font variants not supported.</blockquote>

<dl>
<dt>regular</dt>
<dd>
situs vilate in isis ab ernit.</dd>
<script src="../example-template.js">
</script>
<script>
document.writeln(HTML_TEMPLATE);
</script>

<dt>lighter</dt>
<dd style="font-weight: lighter">
situs vilate in isis ab ernit.</dd>

<dt>italic</dt>
<dd style="font-style: italic">
situs vilate in isis ab ernit.</dd>

<dt>animate on hover</dt>
<dd class="animate_on_hover">
situs vilate in isis ab ernit. &lt;- try mouse over here !</dd>

<dt>big O vs non-slashed zero </dt>
<dd >
big OOO vs zero 000</dd>

<dt>numbers with no font support </dt>
<dd >
111 in running text <br>000 in running text </dd>

<dt>numeric font support </dt>
<dd class="font_numeric">
111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
</dl>
</body>
</html>
36 changes: 5 additions & 31 deletions docs/font/Rubik/FontRubikExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,12 @@
<body>

<h1>H1 Rubik </h1>
<h2>H2 Style Examples from variable font settings</h2>

<p>This should show all the font features that are important in the Kolibri context.</p>
<script src="../example-template.js">
</script>
<script>
document.writeln(HTML_TEMPLATE);
</script>

<dl>
<dt>regular</dt>
<dd>
situs vilate in isis ab ernit.</dd>

<dt>lighter</dt>
<dd style="font-weight: lighter">
situs vilate in isis ab ernit.</dd>

<dt>italic</dt>
<dd style="font-style: italic">
situs vilate in isis ab ernit.</dd>

<dt>animate on hover</dt>
<dd class="animate_on_hover">
situs vilate in isis ab ernit. &lt;- try mouse over here !</dd>

<dt>big O vs non-slashed zero </dt>
<dd >
big OOO vs zero 000</dd>

<dt>numbers with no font support </dt>
<dd >
111 in running text <br>000 in running text </dd>

<dt>numeric font support </dt>
<dd class="font_numeric">
111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
</dl>
</body>
</html>
36 changes: 6 additions & 30 deletions docs/font/Saira/FontSairaExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,14 @@
<body>

<h1>H1 Saira</h1>
<h2>H2 Style Examples from variable font settings</h2>

<p>This should show all the font features that are important in the Kolibri context.</p>
<blockquote>Nice font for fancy headers but also reads well for running text.</blockquote>

<dl>
<dt>regular</dt>
<dd>
situs vilate in isis ab ernit.</dd>
<script src="../example-template.js">
</script>
<script>
document.writeln(HTML_TEMPLATE);
</script>

<dt>lighter</dt>
<dd style="font-weight: lighter">
situs vilate in isis ab ernit.</dd>

<dt>italic</dt>
<dd style="font-style: italic">
situs vilate in isis ab ernit.</dd>

<dt>animate on hover</dt>
<dd class="animate_on_hover">
situs vilate in isis ab ernit. &lt;- try mouse over here !</dd>

<dt>big O vs non-slashed zero </dt>
<dd >
big OOO vs zero 000</dd>

<dt>numbers with no font support </dt>
<dd >
111 in running text <br>000 in running text </dd>

<dt>numeric font support </dt>
<dd class="font_numeric">
111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
</dl>
</body>
</html>
36 changes: 5 additions & 31 deletions docs/font/System_UI/FontSystemUiExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,12 @@
<body>

<h1>H1 System UI</h1>
<h2>H2 Style Examples from variable font settings</h2>

<p>This should show all the font features that are important in the Kolibri context.</p>
<script src="../example-template.js">
</script>
<script>
document.writeln(HTML_TEMPLATE);
</script>

<dl>
<dt>regular</dt>
<dd>
situs vilate in isis ab ernit.</dd>

<dt>lighter</dt>
<dd style="font-weight: lighter">
situs vilate in isis ab ernit.</dd>

<dt>italic</dt>
<dd style="font-style: italic">
situs vilate in isis ab ernit.</dd>

<dt>animate on hover</dt>
<dd class="animate_on_hover">
situs vilate in isis ab ernit. &lt;- try mouse over here !</dd>

<dt>big O vs non-slashed zero </dt>
<dd >
big OOO vs zero 000</dd>

<dt>numbers with no font support </dt>
<dd >
111 in running text <br>000 in running text </dd>

<dt>numeric font support </dt>
<dd class="font_numeric">
111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
</dl>
</body>
</html>
40 changes: 40 additions & 0 deletions docs/font/example-template.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
Provides an html-template to share between font example pages.
*/

const HTML_TEMPLATE = `
<h2>H2 Style Examples from variable font settings</h2>
<p>This should show all the font features that are important in the Kolibri context.</p>
<dl>
<dt>regular</dt>
<dd>
situs vilate in isis ab ernit.</dd>
<dt>lighter</dt>
<dd style="font-weight: lighter">
situs vilate in isis ab ernit.</dd>
<dt>italic</dt>
<dd style="font-style: italic">
situs vilate in isis ab ernit.</dd>
<dt>animate on hover</dt>
<dd class="animate_on_hover">
situs vilate in isis ab ernit. &lt;- try mouse over here !</dd>
<dt>big O vs non-slashed zero </dt>
<dd >
big OOO vs zero 000</dd>
<dt>numbers with no font support </dt>
<dd >
111 in running text <br>000 in running text </dd>
<dt>numeric font support </dt>
<dd class="font_numeric">
111 in tabular text <br>000 in tabular text plus
<span class="font_numeric_fraction">1/3</span>rd fractions</dd>
</dl>
`;

0 comments on commit 22621ec

Please sign in to comment.