From 41b698b29eb944fa10a18b45276da64b16919b08 Mon Sep 17 00:00:00 2001
From: Ben Harris <bjh21@bjh21.me.uk>
Date: Sun, 29 Mar 2020 12:21:50 +0100
Subject: [PATCH] First attempt at translating sample images into HTML

On browsers that support Web fonts, it seems silly to still be using
images for displaying font samples.  So I've tried to translate the
samples into HTML.  The result is a bit of a mess, but it roughly works.
The images are still there, and the stylesheet tries to arrange that
they get used where appropriate, and that speech synthesizers don't try
to read the samples.
---
 bedstead.css | 30 ++++++++++++++++++++++++++----
 index.xhtml  | 32 +++++++++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/bedstead.css b/bedstead.css
index 3d11262..a270988 100644
--- a/bedstead.css
+++ b/bedstead.css
@@ -23,10 +23,6 @@ pre {
     line-height: 1em;
 }
 
-.separated {
-    font-feature-settings: 'ss16';
-}
-
 h1 {
     font-size: 5em;
     font-weight: inherit;
@@ -54,6 +50,32 @@ img {
     max-width: 100%;
 }
 
+.separated {
+    font-feature-settings: 'ss16';
+}
+
+/*
+ * When we're using text as a sample of Bedstead, it should be hidden
+ * from browsers without font support, and the image sample should
+ * be used instead.
+ */
+@media braille, embossed, speech, tty, (grid) {
+    .text-sample {
+	display: none;
+    }
+    .image-sample {
+	display: block;
+    }
+}
+.text-sample {
+    font-size: 50px;
+    display: block;
+    speak: never;
+}
+.image-sample {
+    display: none;
+}
+
 /* Colours that make Bedstead look better (imitating my green monitor) */
 body {
     background-color: #031109;
diff --git a/index.xhtml b/index.xhtml
index 9d66a8e..7bc99b5 100644
--- a/index.xhtml
+++ b/index.xhtml
@@ -25,8 +25,22 @@
       alphabets.  It also has a large number of custom-designed glyphs,
       all of them of course based on the same 5 × 9 pixel grid.</p>
 
-    <p><img alt="[ A sample of Bedstead's characters ]" src="sample.png"/></p>
-
+    <p class="image-sample">
+      <img alt="[ A sample of Bedstead's characters ]" src="sample.png"/>
+    </p>
+    <blockquote class="text-sample">
+      <pre>ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz
+<span style="font-variant: small-caps">abcdefghijklmnopqrstuvwxyz</span>
+ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ
+αβγδεζηθικλμνξοπρςστυϕφχψω
+АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
+абвгдежзийклмнопрстуфхцчшщъыьэюя
+אבגדהוזחטיךכלםמןנסעףפץצקרשת
+0123456789¼½¾!?.,:;'"‘’“”()[]{}
+-—+×÷&lt;=>/\|£$¥¢¤%&amp;*#@¶©®℗
+</pre>
+    </blockquote>
     <p>Bedstead is available in six widths.  The standard version of
       Bedstead is based on a square pixel grid.  This is good for
       displays with square pixels, but not entirely faithful to the
@@ -39,7 +53,19 @@
       Bedstead Condensed and Bedstead Semi Condensed provide intermediate
       widths.</p>
 
-    <p><img alt="[ Various widths of Bedstead ]" src="extended.png"/></p>
+    <p class="image-sample">
+      <img alt="[ Various widths of Bedstead ]" src="extended.png"/>
+    </p>
+    <blockquote class="text-sample">
+      <div>
+	<code style="display: inline-block; width: 10em;">Bedstead</code>
+	<code style="font-stretch: expanded">Extended</code>
+      </div>
+      <div style="font-size: 2em; font-stretch: ultra-condensed;">
+	<code style="display: inline-block; width: 5em;">Ultra Condensed</code>
+	<code style="font-stretch: extra-condensed;">Extra Condensed</code>
+      </div>
+    </blockquote>
 
     <p>The outline version of Bedstead is generated by an ISO C program
       which emits a Spline Font Database file for use with
-- 
2.30.2