Văn bản dọc, chữ ngang (Vertical Text, Horizontal Letters) với CSS

Giới thiệu

CSS cung cấp 2 thuộc tính mạnh để hiển thị văn bản dọc nhưng các chữ cái vẫn ngang: writing-mode và text-orientation. Hữu ích cho tiêu đề dọc, label trục biểu đồ, thiết kế tiếng Nhật/Trung/Hàn, hoặc hiệu ứng visual độc đáo.

Cú pháp

.vertical-text {
    writing-mode: vertical-rl;   /* Dọc, đọc từ phải sang trái */
    text-orientation: upright;   /* Chữ cái đứng thẳng (ngang) */
}

Giá trị writing-mode

horizontal-tb (mặc định): Ngang, từ trên xuống dưới (Top-Bottom).
vertical-rl: Dọc, từ phải sang trái (Right-Left) - phổ biến nhất cho tiếng Việt.
vertical-lr: Dọc, từ trái sang phải (Left-Right) - dùng cho tiếng Mongolia.
sideways-rl / sideways-lr: Xoay 90° toàn bộ dòng (chữ ngửa).

Giá trị text-orientation

mixed (mặc định): Chữ Latin ngang, chữ CJK dọc.
upright: Tất cả chữ đứng thẳng (ngang) - dùng cho vertical text tiếng Việt.
sideways: Tất cả chữ ngửa 90°.

Ví dụ 1: Tiêu đề dọc đơn giản

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical Text Demo</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 3rem; display: flex; gap: 3rem; align-items: flex-start; min-height: 100vh; background: #fafafa; }
        
        .vertical-title {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 2.5rem;
            font-weight: 700;
            color: #6a1b9a;
            line-height: 1.5; /* Khoảng cách giữa các chữ */
            padding: 1rem;
            border: 3px dashed #6a1b9a;
            border-radius: 12px;
            background: linear-gradient(135deg, #f3e5f5, #e8daef);
            box-shadow: inset 0 0 20px rgba(106, 27, 154, 0.1);
        }
        
        .content { flex: 1; }
        .content h2 { color: #2c3e50; margin-bottom: 1rem; }
        .content p { line-height: 1.8; color: #555; }
    </style>
</head>
<body>
    <h4 class="vertical-title">Tiêu đề dọc</h4>
    <div class="content">
        <h2>Văn bản dọc với chữ ngang</h2>
        <p>Thuộc tính writing-mode: vertical-rl kết hợp text-orientation: upright cho phép hiển thị văn bản theo chiều dọc nhưng mỗi ký tự vẫn đứng thẳng (không bị xoay).</p>
        <p>Ứng dụng: Tiêu đề sidebar, label trục Y biểu đồ, thiết kế banner dọc, trích dẫn nổi bật.</p>
    </div>
</body>
</html>

Ví dụ 2: Nhiều dòng văn bản dọc (Flex Container)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multiple Vertical Text</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2rem; background: #fafafa; }
        .verticalContainer {
            display: flex; gap: 2rem; align-items: flex-start; min-height: 300px;
            padding: 2rem; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .verticalWord {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 3rem; font-weight: 700;
            line-height: 1.2;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
        }
        .word1 { background: linear-gradient(135deg, #ff6b6b, #ee5a5a); color: white; }
        .word2 { background: linear-gradient(135deg, #4ecdc4, #3dbdb5); color: white; }
        .word3 { background: linear-gradient(135deg, #ffe66d, #fdd835); color: #333; }
        .word4 { background: linear-gradient(135deg, #a66cfe, #9055ff); color: white; }
    </style>
</head>
<body>
    <div class="verticalContainer">
        <p class="verticalWord word1">Mot</p>
        <p class="verticalWord word2">Hai</p>
        <p class="verticalWord word3">Ba</p>
        <p class="verticalWord word4">Bon</p>
    </div>
</body>
</html>

Ví dụ 3: Label trục biểu đồ (Chart Axis Label)

.chartContainer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    max-width: 600px;
}
.yAxisLabel {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.chartArea { /* canvas hoặc svg chart */ }

Lưu ý quan trọng

Chiều cao container: Văn bản dọc cần container có chiều cao đủ (hoặc min-height) để hiển thị đầy đủ.
Line-height: Điều chỉnh khoảng cách giữa các chữ (mặc định thường quá dày).
White-space: white-space: nowrap ngăn wrap không mong muốn.
Font fallback: Một số font không render đẹp vertical - test kỹ (system fonts, Google Fonts Roboto/Noto Sans đều tốt).
Accessibility: Screen reader đọc bình thường (theo DOM order), không bị ảnh hưởng bởi writing-mode.

Browser Support

Hỗ trợ tốt trên tất cả trình duyệt hiện đại (Chrome 48+, Firefox 41+, Safari 10.1+, Edge 79+). IE11 hỗ trợ writing-mode nhưng với tiền tố -ms- và không hỗ trợ text-orientation.