direction、writing-mode

Posted on 2019-12-20 Edited on 2023-11-24 In CSS Views: Disqus:

一、direction

direction 屬性是用來控制一塊級元素片語是從左開始放還是從右開始放，

有兩種屬性值分別是 ltr(預設、由左至右)、rtl(由右至左)。

<!DOCTYPE html>
<html>

<head>
    <style>
        p.rtl {
            direction: rtl;
        }

        p.ltr {
            direction: ltr;
        }
    </style>
</head>

<body>
    <p>This text goes from left to right. This is default.</p>
    <p class="ltr">This text goes from right to left.</p>
    <p class="rtl">This text goes from right to left.</p>
</body>

</html>

其畫面為

二、writing-mode

writing-mode 屬性可以決定每一整段(block)文字是從左開始放還是從右開始放

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }

        .htb {
            writing-mode: horizontal-tb;
        }

        .vrl {
            writing-mode: vertical-rl;
        }

        .vlr {
            writing-mode: vertical-lr;
        }
    </style>
</head>

<body>
    <div>
        <p class="htb">show me the money.</p>
    </div>
    <div>
        <p class="vrl">show me the money.</p>
    </div>
    <div>
        <p class="vlr">show me the money.</p>
    </div>
</body>

</html>

其畫面為