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.

diff --git a/bedstead.css b/bedstead.css
index 3d11262d6689f64939dbc934a890a4b86191ffbb..a270988cd481e2b359af4e8367c5a5b3cc34bab9 100644 (file)
--- 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 9d66a8ed36e7d819c5605f6944e3c9a3bcda10ad..7bc99b56a9951f3466a9dd7e308f11d17f67a200 100644 (file)
--- 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