Recently I've been restoring an ancient website, one I first created in 1994, 29 years ago: The alt.sex FAQ.
alt.sex was the very first question-and-answer forum for
sex-related questions on Usenet, even before there was an Internet, and somehow,
when I was 28 years old myself, I wound up in charge of the editing team putting
together the FAQ for that wild place. It's been 25 years, I wondered what it
would be like to rebuild the site in a modern setting. It was fun.
One tricky part of the restoration was the titling, which you can see here:
In 1994, most people's screens were 640x480 pixels, and we had much more horizontal than vertical real estate. When I designed the website I figured it was better to put the location on the right rather than up top. There was no CSS in 1994; this was done entirely with GIFs (no, really!), a repeating image background, and tables. It might seem primitive, but smartphones didn't come around for another 13 years, and this was entirely serviceable and, for the time, surprisingly stylish and adept.
It took me several hours to track down the two fonts that I had used back then; both were available and had commercial-free licenses, but the question remained, how did I do that vertical rendering?
I searched CodePen and a variety of other sites for techniques, and none of them
were very clear or very usable. Most people used the CSS
get it into position. If you watch
rotate, you'll see that the object
rotates around a specific point, which is addressable, and playing with the
different locations, I realized that if I made the
top right corner the pivot
point, the text was vertical but off by the original width of the container,
so I could just transform it back! With a little extra math to center the text,
it came out pretty perfect. Click on the CodePen to see the result:
One problem with this solution is that the container must be large enough to contain the entire text, and that's not automatic. In the restoration I used a grid layout to ensure that the leftmost column would be as long as the text, which was always long enough to ensure the entire title would fit. It worked out well, and I'll be putting the restored site up pretty soon.