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 transform: rotate(-90deg), and then either used weird float magic or Javascript to 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:

See the Pen Untitled by Ken "Elf" Mathieu Sternberg (@elfsternberg) on CodePen.

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.