Safari badly misdisplays Bedstead in proportional mode. This is
caused by a bug in WebKit, and I haven't found an acceptable
workaround. Thus, I think the best thing to do is to turn off
proportional spacing on the Web page entirely. I think it looks nice,
but even I'll admit that it's a little too tight, and I know others
prefer the monospaced version.
Also, I can't think of a way that a real chip anything like the
SAA5050 could produce proportionally-spaced text. It's fundamentally
based on getting fed character data at a constant 1 MHz. There's no
way it can ask for a character early because the previous one was
narrow.
It's more compact and works just as well. In fact, I think it might
work better on browsers that support background-image but not
background-size. On such browsers the entire rule will be ignored,
which is what I want. If the background image can't appear at
precisely the correct size, it shouldn't appear at all.
Of course, ideally on a browser that fails to display the background,
the title also wouldn't fade out to the left. I wonder if there's a
sensible way to achieve that.
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.
