HTML doesn't allow <div> inside <h1>. I found before that using a
<span> caused the background not to work. That seems to be down to CSS2
section 10.6.1, describing inline, non-replaced elements: "The height of
the content area should be based on the font, but this specification
does not specify how."
Happily, we can just define this particular <span> to be a block
element, so that it behaves like a <div> even though it's a <span>.
That works fine, and because we're only using it to get a well-defined
content area it doesn't matter if it's ineffective when the stylesheet
is missing.
The new title is a fade from a (manipulated) photo of the word
"Bedstead" displayed by my Beeb on a CRT monitor into the title text in
Bedstead Extended. The other visible tweak is to increase the left
margin so that the headings have some clearance from the left edge of
the window. At the same time, I've set the other margins explicitly to
the 8px that Firefox and Chromium use by default.
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.
A typical Web browser support Web Fonts these days, so there's no need
to use an image for the purpose. The other images remain for now since
they're not really representing text.
Playing with Firefox's "Responsive Design Mode" made it clear to me
that Bedstead's Web page was not very mobile-friendly, especially in
the way that the title runs off the end of a reasonable-sized vertical
screen. A simple CSS rule requests downscaling of images to the width
of the screen, which helps a lot.
I recently saw Bedstead featured on a collection of programming fonts
and noticed that it was much prettier there than on its own Web page.
That's clearly wrong, and I think displaying it in a light colour on a
dark background (and with less than maximum contrast) helped. The new
colours are based on my memory of the old Philips green-screen monitor
currently connected to my Beeb (because I'm too lazy to get out of bed
and check it).
It was obviously wrong that the <ul> on the Bedstead Web page had
circular bullets. The current CSS Lists and Counters working draft,
<http://www.w3.org/TR/2014/WD-css-lists-3-20140320/>, allows for setting
the bullet to a string, and Firefox 54 supports this, so use it in the
CSS for Bedstead's Web page.
The names of the widths now track those in the OpenType 'OS/2' table, so
the former condensed and semicondensed are now ultra-condensed and
extra-condensed, and there are new condensed and semi-condensed widths
to fill the gaps. Also, the fonts are named more consistently with
Adobe's practice: "Bedstead Semi Condensed" and so forth.
The new Bedstead Condensed makes a pretty decent terminal font, which is
a nice side-effect.
