#writingMode

pablolarahpablolarah
2024-04-16

🔴 Writing mode + pseudo content
by Ana Tudor @anatudor
on @codepen
Vertical `writing-mode` and you also have a pseudo with some `content`, that `content`... may or may not be rotated.

codepen.io/thebabydino/pen/VwN

Logo Codepen top left. White text: writing mode + pseudo content
Ana Tudor
Codepen with code:
html: <div data-c="✔">some text</div>
<div data-c="A">other text</div>
<div data-c="😻">mode text</div>
CSS: body {
  writing-mode: vertical-lr;
}

div {
  font: 1.5em sans-serif;
}
div::before {
  color: crimson;
  content: attr(data-c);
}
Result: 3 columns of text vertical with emojis and html entities in normal mode:
✔ some text
A other text
😻 mode tex
Ana Tudor 🐯anatudor
2024-04-16

(or )

If you use a vertical `writing-mode` and you also have a pseudo with some `content`, that `content`... may or may not be rotated, depending on its nature! 😼

I'm not even kidding. And it's the same in every browser.

test codepen.io/thebabydino/pen/VwN

The relevant CSS:

```
body { writing-mode: vertical-lr }

div {
	font: 1.5em sans-serif;
	
	&::before {
		color: crimson;
		content: attr(data-c)
	}
}
```

And the visual result: the checkmark and the cat face emoji don't get rotated like the rest of the element text, but the letter 'A' does.
𝚊𝚖𝚒 ˢʰᵒᵘˡᵈ ᵇᵉ ʷʳⁱᵗⁱⁿᵍami_moller@mastodon.nz
2023-07-20

this week i took myself (and my canine sidekick) on a mini writing retreat. new article in the works. 📝 #OfficeWithAView #WritingMode #PhDLife

a garden scene with a laptop and notebook on a table in the foreground and a white dog, standing between two mandarin trees, looking towards the pacific ocean in the background.

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst