Ось кілька варіантів, як зробити вертикальний напис зліва на сторінці (притиснутий до лівого краю), подібно до того, як виглядає «W3C Recommendation» на старих специфікаціях w3.org.
### Варіант 1 — найпростіший і найпоширеніший (transform + fixed позиціонування)
```html
Вертикальний текст зліва
W3C Recommendation
Важливий документ
Основний контент сторінки починається тут...
Текст зліва не заважає прокручуванню.
```
### Варіант 2 — з використанням writing-mode (більш «нативний» вертикальний текст)
```css
.vertical-label {
position: fixed;
left: 20px;
top: 100px; /* або top: 50%; transform: translateY(-50%) */
writing-mode: vertical-rl; /* вертикальне письмо, читання зверху вниз */
text-orientation: mixed; /* або upright, якщо хочете всі букви прямо */
font-size: 1.2rem;
font-weight: bold;
color: #555;
padding: 10px 0;
letter-spacing: 2px;
z-index: 50;
pointer-events: none;
}
```
HTML той самий:
```html
W3C RECOMMENDATION
```
### Варіант 3 — якщо потрібно дуже близько до краю + сучасний вигляд
```css
.vertical-ribbon {
position: fixed;
left: -36px; /* ховаємо частину за край */
top: 180px;
transform: rotate(-90deg);
transform-origin: left top;
background: #e00;
color: white;
font-weight: bold;
font-size: 14px;
padding: 8px 60px 8px 10px; /* імітація стрічки */
box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
white-space: nowrap;
z-index: 999;
}
```
```html
W3C Recommendation 2025
```
### Поради
- Найчастіше на w3.org використовували саме `transform: rotate(-90deg)` + `position: fixed` або `absolute`
- Якщо текст довгий — додайте `letter-spacing: 1–3px`
- Для кращої читабельності можна використовувати шрифт без засічок (`Arial`, `Helvetica`, `system-ui`)
- Якщо хочете, щоб текст був саме праворуч вертикально — просто поміняйте `rotate(-90deg)` на `rotate(90deg)` і `left` на `right`
Який саме стиль вам ближчий — класичний w3c, стрічка, чи просто чистий вертикальний текст? Можу підігнати код точніше.