cssのwriting-mode属性の例を詳しく解説

writing-mode 属性は当初 IE のみの属性であり、現在は CSS3 の Google と Firefox でサポートされています。

そのため、使用する際には、IE のプライベート プロパティと CSS3 の正規プロパティという 2 つの異なる構文セットを覚えておく必要があります

IE8+ との互換性だけが必要な場合は、正規プロパティを使用するだけで済みます。 CSS3 の

css3:

writing-mode:horizontal-tb;//默认：水平方向，从上到下

writing-mode: vertical-rl;//垂直方向，从右向左

<span style="font-size: 18px">writing-mode:  vertical-lr;//垂直方向，从左向右</span><br/><span style="font-size: 18px">ie私有属性：</span><br/><span style="font-size: 18px">主要的:</span>

writing-mode: lr-tb ;//从左到右，从上到下。默认

writing-mode: tb-rl;//从上到下，从右向左

writing-mode:tb-lr (IE8+);//水平方向，从上到下，从左到右

プロジェクトが IE7 と互換性がある必要がある場合は、次の 2 つの値に注意するだけです: 初期値 lr-tb と tb-rl (水平方向に対応) CSS3仕様の-tbとvertical-rl!

writing-mode 属性は float 属性に似ています (要素の幅と高さは子要素によってサポートされます)。これは元々、テキストの表示を制御するために設計されました。 writing-mode は、ページのデフォルトの水平方向のフローを設定します
1。マージンは水平方向にも重ねることができます
css

.demo {
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: vertical-lr;
            writing-mode: tb-lr;
            margin-bottom: 20px;

        }

        .demo .p1, .demo .p2 {
            margin: 0 20px;
            background-color: red;
        }

2。 auto を使用して垂直方向の中央揃えを実現します

css

b52737590140274758f52712e6d46417
    8eb75804e58375c7a2a4dd2914b2cc83水平方向margin重叠94b3e26ee717c64999d7867364b1b4a3
    25fdd61924ec43f68f6d130ac257deb1水平方向margin重叠94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3

html

.demo1 {
            height: 300px;
            background-color: #006000;
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: vertical-lr;
            writing-mode: tb-lr;
        }


        .demo1 .p3 {
            height: 100px;
            width: 200px;
            margin: auto 0;
            background-color: red;
        }

3. text-align:center を使用して画像の垂直方向の中央揃えを実現できます

css

<p class="demo1">
    <p class="p3"></p></p>

html

   
       .demo2 {
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: vertical-lr;
            writing-mode: tb-lr;
            height: 300px;
            background-color: #006000;
            text-align: center;
        }

4. text-indent を使用してテキストシンク効果を実現できます

css

<p class="demo2">
    <img src="images/1s.jpg"></p>

html

.demo3{
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: vertical-lr;
            writing-mode: tb-lr;
        }
        .demo3 a {
            border: 10px solid red;
            text-decoration: none;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            text-align: center;
            font-size:28px;
            color: darkred;
            display: block;
            height:50px;
            width: 50px;
            line-height: 50px;
            background-color: red;
            box-shadow: inset 0 0 1px darkred, 0 1px, 0 2px, 0 4px;
        }

5. 完全に互換性のあるアイコンフォントの回転効果を実現できます

書き込みモードを設定するだけです。アイコンを含む親要素をvertical-rlに変更すると、要素の180度回転が実現できます

writing-modeと方向の関係

writing-mode 、direction、unicode-bidi は、CSS ワールドのレイアウト フロー プロパティでテキストを変更する 3 つの主な方法です。このうち、direction と unicode-bidi は密接な関係にあり、CSS3 の all プロパティの影響を受けない唯一の CSS プロパティでもあります。基本的には inline 要素と一緒に使用します。

一見すると、writing-mode には、direction、unicode-bidi などのいくつかの機能と動作が含まれているように見えます。 >vertical-rl の rl は、direction の rtl 値と同様で、どちらも右から左です。しかし、実際には、この 2 つは交わることがありません。このとき、vertical-rl のドキュメント フローは垂直方向であり、rl は水平方向を表すため、direction:rtl を設定します。このとき、実際の値 rtl は、垂直インライン要素のテキストの方向を、交差することなく 1 つは水平方向、もう 1 つは垂直方向に変更します。さらに、writing-mode はブロック要素に影響を与え、CSS ワールドの垂直方向と水平方向のルールを直接変更することができます。これは、direction よりもはるかに強力で狡猾です。

writing-mode, direction, unicode-bidi是CSS世界中3大可以改变文本布局流向的属性。其中direction, unicode-bidi属于近亲，经常在一起使用，也是唯一两个不受CSS3 all属性影响的CSS属性，基本上就是和内联元素一起使用使用。

乍一看，writing-mode似乎包含了direction, unicode-bidi某些功能和行为，例如vertical-rl的rl和direction的rtl值有相似之处，都是从右往左。然而，实际上，两者是没有交集的。因为vertical-rl此时的文档流为垂直方向，rl表示水平方向，此时再设置direction:rtl，实际上值rtl改变的是垂直方向的内联元素的文本方向，一横一纵，没有交集。而且writing-mode可以对块状元素产生影响，直接改变了CSS世界的纵横规则，要比direction强大和鬼畜的多。

然而，CSS的奇妙就在于，某些特性当初可能就是问了某些图文排版设计，但是，我们可以利用其带来的特性，发挥自己的创造力，实现其他很多意想不到的效果。所以，上面出现的三剑客都是非常好的资源。

writing-mode和*-start属性的流机制

CSS3中出现了诸多*-start/*-end属性（亦称为CSS逻辑属性），例如：margin-start/margin-end, border-start/border-end, padding-start/padding-end, 以及text-align:start/text-align:end声明。

下面问题来了，为什么会蹦出这么多*-start/*-end鬼？

那是因为现代浏览器加强了对流的支持，包括老江湖direction，以及最近年月跟进的writing-mode。

在很久以前，我们的认知里，网页布局就一种流向，就是从左往右，从上往下，因此，我们使用margin-left/margin-rightしかし、CSS の不思議な点は、一部の機能は元々特定のグラフィックスやテキスト レイアウト用に設計されたものであっても、その機能を使用して創造性を発揮し、他の多くの予期せぬ効果を実現できることです。したがって、上記の三銃士はすべて非常に優れたリソースです。

🎜🎜🎜🎜writing-mode 属性と *-start 属性のストリーミング メカニズム🎜🎜🎜🎜🎜多くの *-start/*-end🎜 属性 (CSS 論理属性とも呼ばれます)、例: margin-start/margin-end、border- start/border-end、padding-start/padding-end、および text-align:start code> /<code>text-align:end ステートメント。 🎜🎜🎜🎜次の疑問は、なぜこれほど多くの *-start/*-end ゴーストが出現するのかということです。 🎜🎜🎜🎜それは、最近のブラウザーが、Lao Jianghu の direction や、近年それに続く writing-mode など、ストリーミングのサポートを強化しているためです。 🎜🎜🎜🎜昔、私たちの理解では、Web ページのレイアウトには左から右、上から下という流れの方向があるため、margin-left/ margin-right は問題ありません。ただし、フローが変更される可能性がある場合、たとえば、画像が左端から 20 ピクセル離れていて、ドキュメント フローを右から左へ、同時に右側から 20 ピクセル離れているようにしたいとします。 、 私たちは何をすべきか？ 🎜🎜

現時点では、画像の direction が変更されると margin-left:20px は無効になります。ただし、margin-start は存在しません。この質問では、いわゆる開始とはドキュメント フローが開始する方向を指します。つまり、ページがデフォルトのドキュメント フローの場合、margin-start は margin と同等です。 -left 、ドキュメントが右から左に水平方向に流れる場合、 margin-start は margin-right と同等です。 margin-end も同様です。 margin-left:20px在图片direction变化后，就无效了；但是，margin-start就不会有此问题，所谓start, 指的是文档流开始的方向，换句话说，如果页面是默认的文档流，则margin-start等同于margin-left，如果是水平从右往左文档流，则margin-start等同于margin-right。margin-end也是类似的。

webkit内核的浏览器还支持*-before和*-end，默认流下的margin-before近似于margin-top，margin-after近似于margin-bottom，然而，规范貌似没提及，FireFox也没支持，*-before和*-after出场的机会并不多，为什么呢？因为实际上，配合writing-mode，*-start/*-end已经可以满足我们对逻辑位置的需求了，水平和垂直都可以控制，对立方向适用老的*-top/*-bottom.

例如，我们设置writing-mode值为vertical-rl，此时margin-start等同于margin-top，如果此时margin-start，margin-top同时存在，会遵循权重和后来居上原则进行相互的覆盖。

可以看到，场景不同，margin-start的作用也不能，能上能下，能左能右简直在世百变星君。

关于*-start/*-end

🎜Webkit ベースのブラウザは、*-before と *-end もサポートしています。margin-before のデフォルトのフローは margin-top、margin-after は margin-bottom に似ていますが、仕様には記載されていないようで、FireFox はサポートしていません。 *- before と *-after が出現する機会はあまりありません。なぜでしょうか。実際、書き込みモードでは、*-start/*-end が論理位置のニーズをすでに満たしているため、水平方向と垂直方向の両方を制御できます。逆方向 古い *-top/*-bottom に適用されます。🎜🎜🎜🎜たとえば、writing-mode の値を次のように設定します。 vertical-rl、この時点では margin-start は margin-start の場合、margin-top と同等です。 code>、margin-top は同時に存在し、重みと最後に来る原則に従って相互にカバーします。 🎜🎜🎜🎜 さまざまなシナリオで margin-start が機能しないことがわかります。これは上下左右に移動でき、この世界ではスターキングのようなものです。 🎜🎜🎜🎜 *-start/*-end については、今後機会があれば詳しく説明しますので、この辺で止めておきます。現時点では実際のプロジェクトでは使用されないと推定されます。 🎜🎜

以上がcssのwriting-mode属性の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。