Trouble with "transform" and "writing-mode"

[alloydog]

I want to have some text rotated 90 and 270 degrees.

When I used “transform: rotate(90deg)”, it worked, sort of: The text was rotated 90 degree and ran from top to bottom, but the two words were on two lines.
https://oh8gad.neocities.org/www/transform_rotate_90deg.png

For the left side of the page, I want the text to run from bottom to top, so I used “transform: rotate(-90deg)”. Again, the text direction was correct, but the words were split over two lines. I also tried “transform: rotate(270deg)” with the same result.
https://oh8gad.neocities.org/www/transform_rotate_270deg.png

After a bit of searching, I came across “writing-mode”.
For the left-side top-to-bottom text, I used “writing-mode: tb-rl;”. That worked correctly.
https://oh8gad.neocities.org/www/writingmode_tb-rl.png

I then tried “bt-lr”, but that did not work at all. I tried all sorts of combinations of bees, tees, ells and aghs!, but they to did not work. The text was horizontal.
https://oh8gad.neocities.org/www/writing-mode_bt-lr.png

My site is hosted on Neocities (neocities.org), which has a pretty good online editor. For both HTML and CSS, it highlights well and even flags dodgy scripting. For example, if you use padding, margin along with borders, it warns that sizing may not be as expexted. It also highlight bad and invalid scripting and so on.

Now, for my style sheet, it shows the “transform: rotate” and “writing-mode: tb-rl;” as “correct” colours, but for other variations of “writing-mode:—“, it’s all light grey, which suggests something isn’t quite right, but it doesn’t flag it as invalind script.
https://oh8gad.neocities.org/www/htmleditor.png

I have also tested these on the desktop of my PC, so it doesn’t run through Neocites servers and I get the same results, so I don’t think it is due to any “undocumanted features” of the Neocites service. I’m 99,999999% sure I’ve missed something/done something wrong, but I can’t fathom out what it is.

The actual webpage is at:
https://oh8gad.neocities.org/test.html

Thanks for any help anyone can offer.

Rob

[alloydog]

SOLVED!

I found an answer on Stackoverflow:
https://stackoverflow.com/questions/40205702/how-to-write-vertical-text-from-bottom-to-top-without-using-transform-rotate

It turns out that only “writing-mode: tb-rl;” works as it stands. If you want the text to run from bottom to top, then you need to use “transform: rotate(-180deg)” as well.

This is what I ended up with:

.PrevPage p {
writing-mode: tb-rl;
transform: rotate(-180deg);
padding: 0;
margin: 0;
}

It woks a treat now.

[Author]

Posts