1. 増加する書き込みモード
書き込みモードは、ほとんど目にしたり使用したりしない CSS プロパティです。私たちは、一般的ではないテキストを「一般的ではない」と呼ぶのと同じように、一般的ではない CSS 属性を「一般的ではない属性」と呼ぶことがあります。ライティングモードでは、「一般的ではない属性」は非常に弱く、必要のないものであると感じられます。
しかし、実際には、私たちは皆間違っていました、完全に間違っていました、書き込みモードが弱いのですか?冗談じゃない、書き込みモードは CSS の世界で最もとんでもない CSS プロパティであると言え、CSS の世界の多くのルールを直接覆します。
writing-mode が「不明」と感じられるのには理由があります。
実際、書き込みモード CSS プロパティは古代に誕生し、IE5.5 ブラウザーはすでにそれをサポートしています。
それは奇妙です!書き込みモードは非常に簡単で、初期のものであり、古いものであるにもかかわらず、なぜ 20 年近くも沈黙していたのでしょうか?
なぜなら、長い間、FireFox や Chrome などの最新のブラウザーはライティング モードをサポートしておらず、ライティング モードは基本的に IE ブラウザーのプライベート製品であり、誰もが IE に興味を持っていなかったからです。印象は良いですよね？
しかし、私たちが人気のフロントエンド技術に目がくらんでいるときに、主要な最新ブラウザは (主に FireFox ブラウザの積極的なフォローアップにより) 書き込みモードのより標準的なサポートを実装しました。 、いつになるかわかりませんが、書き込みモードの互換性は問題になりません。さらに、この属性の特性は信じられないほどです、私が行くとき、私は新星、いや、それが新月を見ているようです。そして満月です。
2. writing-mode
の元の機能は、もともと inline 要素 (いわゆる Text Layout) の表示を制御するために設計されたものです。 。なぜなら、アジア、特に中国などの東アジア諸国では、中国の古詩や散文など、文章のレイアウトが横書きではなく縦書きだからです。
したがって、テキストを縦方向に表示できることを実現するために、writing-mode が使用されます。
ここをクリックできます: CSS 書き込みモードとテキストの垂直レイアウトのデモ
IE11 ブラウザ IE8 モードから取得:
書き込み-モード構文
2 つの異なる構文セットを覚える必要があるため、writing-mode の構文学習は他の CSS プロパティよりも高くなります。 1 つは IE のプライベート プロパティで、2 つ目は CSS3 仕様のプロパティです。
まず、将来必要になる CSS3 構文を見てみましょう:
/* 关键字值 */writing-mode: horizontal-tb; /* 默认值 */writing-mode: vertical-rl;writing-mode: vertical-lr;/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */writing-mode: inherit;writing-mode: initial;writing-mode: unset;
ログイン後にコピー
各キーワード属性値の意味。たとえば、透明な名前を通じてそのおおよその意味を知ることができます。 、デフォルト値horizontal-tbは、テキストフローが水平（水平）であり、要素が上から下に積み重ねられることを示します（tb: t op- b ottom）。
vertical-rl は、テキストが垂直方向に表示され、読み上げ順序が右から左であることを意味します (rl: r ight- l eft) 、これは古代の詩の読む順序と一致しています。
vertical-lr は、テキストが垂直に表示されることを意味し、読み上げ順序はデフォルトでも左から右です (lr: l eft- r ight )つまり、水平方向から垂直方向にのみ変化します。
以下は、各値での中国語と英語のパフォーマンスの比較です (MDN から参照):
//zxx: 英語のパフォーマンスが高いことがわかります。文字が裏返される場合は、text-orientation:upright を使用して縦向きにすることができます。ただし、FireFox と Chrome ではサポートされています。
古い IE ブラウザの構文を見てみましょう。歴史的な理由から、IE の公式ドキュメントでは次のように示されています。テスト (非ネイティブ IE8、IE9)、-ms- プライベート プレフィックスはデフォルトで直接書き込みモードであるため、IE ブラウザーはそれをサポートします。 -ms-writing-mode この書き込み方法は IE7 ブラウザーではサポートされていませんが、公式の手順は次のとおりです:
-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb
ログイン後にコピー
Windows Internet Explorer 7。rl-tb、および bt-rl の値are available to the -ms-writing-mode
は、IE7 の -ms-writing-mode が 2 つの値 rl-tb と bt-rl を使用できることを意味しますが、これは私自身のテストでは、ネイティブ IE7 ブラウザーである可能性があると考えていますが、私はネイティブ IE7 を持っておらず、テストしていません。したがって、この記述 (ネイティブ IE7 サポート) は私自身の推測にすぎません。
指で数えてみたところ、IE ブラウザーには 11 個ものキーワードがあり、これはサッカー チームを形成するのに十分な数です。
lr-tb IE7+ ブラウザのサポート。初期値。コンテンツは左から右 (l eft- r ight) および上から下 (t op- b ottom) に水平に流れます。 、および前の要素行の下にある水平要素の次の行では、すべてのシンボルが直立して配置されます。ほとんどの書記体系はこのレイアウトを使用します。 rl-tb IE7+ ブラウザのサポート。コンテンツは右から左へ水平に流れます (r 右 - l 左、上から下 (t OP- b オトム)、前の行の下に次の水平要素が配置され、すべての記号が直立して配置されます。このレイアウトは、アラビア語、ヘブライ語、タアンナ語、シリア語など、右から左に書かれる言語に適しています。 IE7+ ブラウザでサポートされています。ight- l eft) は垂直方向に流れ、次の垂直線は前の垂直線の左側に配置され、全角記号は直立して配置されます。幅記号 (幅の狭いラテン文字または幅の狭いかな記号とも呼ばれます) が続きます。時計回りに 90 度回転します。このレイアウトは主に東アジアの植字で見られます。IE7 以降のブラウザは、下から上へのコンテンツをサポートします。 b ottom- t. op)、右から左に垂直に流れます (r ight- l eft)、次の垂直線は前の垂直線の左側に配置され、全角記号は直立して配置されます。非全角記号 (狭ラテン記号または狭仮名記号とも呼ばれます)。時計回りに 90 度回転します。このレイアウトは、東アジアの垂直レイアウトでより一般的です。テキストブロックは右から左へ。tb-lr IE8+ ブラウザでサポートされます。コンテンツは左から右へ (t op- b ottom)。 ( l eft- r ight) 次の垂直線は前の垂直線の右側にあります (b ottom- <)。 🎜>t op. )、左から右への垂直フロー (l eft- r ight) lr-bt IE8+ ブラウザーは下からサポートします。 >b ottom- t op)、左から右へ水平に流れます (l eft-r ight)。 >rl-bt IE8+ ブラウザは、下から上 (b ottom- t op)、右から左 ( r ight- <) のコンテンツをサポートします。 🎜>l 左）水平方向の流れ。 lr IE9+ ブラウザのサポート。 SVG および HTML 要素で使用されます。 lr-tb と同等。rl IE9+ ブラウザのサポート。 SVG および HTML 要素で使用されます。 rl-tb と同等。tb IE9+ ブラウザのサポート。 SVG および HTML 要素で使用されます。 tb-rl と同等 各属性値のパフォーマンスは次のとおりです (Microsoft 公式 Web サイトより) いくつかの説明: 同じwriting-mode 属性 値は蓄積されません。たとえば、writing-mode:tb-rl が親と子の両方に設定されている場合、レンダリングされるのは 1 回だけであり、子要素は「回転」されません。 2回。 IE ブラウザ下で、独自のレイアウトを持つ要素 (プレーンテキスト要素ではない) が親要素とは異なる write-mode 属性値を持つ場合、子要素のレイアウト フローが変更されると、座標がその親要素のシステムの利用可能なスペースが最大限に活用されます。左側のテキストは専門用語すぎるため、理解できないかもしれません。IE ブラウザーでは、レイアウト要素が (たとえば) 水平から垂直に変更されると、その要素は 100% 適応すると考えられます。親要素の垂直方向の高さ。そのため、IE ブラウザ (IE13 以降を除く) では、要素が縦方向に流れると、高さが恐ろしく感じられ、他の最近のブラウザとはレイアウトが異なることが原因です。 Chrome ブラウザでは現在でも -webkit-private プレフィックスが必要です。Chrome と Opera は tb-rl などの古い IE 属性値を認識しますが、それらはまったく意味のあるものではありません。耳が聞こえないのは効果がありません。
注意が必要な書き込みモード属性値
直接開発の観点から、IE は最大 11 個のプライベート属性値をサポートしますが、注意が必要なものがいくつかありますが、どれでしょうか?
プロジェクトが IE7 と互換性がある必要がある場合は、次の 2 つの値に注意するだけです: 初期値 lr-tb と tb-rl (horizontal-tb と tb-rl に対応)垂直 - CSS3 仕様の rl!他の 9 つの属性値は、すべてのゲームをプレイできるようにするだけです。
- プロジェクトが IE8+ との互換性だけを必要とする場合、おめでとうございます。CSS3 仕様の属性に完全に対応でき、IE8 での書き込みモードは IE7 よりもはるかに強力です。注意する必要があるのは、初期値 lr-tb、tb-rl、および tb-lr で、それぞれ CSS3 のhorizontal-tb、vertical-rl、vertical-lrに対応します。
- 一見複雑な属性は非常に単純になりましたか? 実践的なバージョンを再構成してみましょう:
writing-mode: lr-tb | tb-rl | tb-lr (IE8+);writing-mode: horizontal-tb | vertical-rl | vertical-lr;
ログイン後にコピー
对，大家只要记住上面几个就可以了，enough! 因为所谓的垂直排版，实际web开发是很少很少遇到的。
有同学可能要疑问了，既然 writing-mode 实现文本垂直排版场景下，那还有什么学习的意义呢？
前面也提到了，虽然 writing-mode 创造的本意是文本布局，但是，其带来的文档流向的改变，不仅改变了我们多年来正常的CSS认知，同时可以巧妙实现很多意想不到的需求和效果。
三、writing-mode不经意改变了哪些规则？
writing-mode将页面默认的水平流改成了垂直流，颠覆了很多我们以往的认知，基于原本水平方向才适用的规则全部都可以在垂直方向适用！
1. 水平方向也能margin重叠
W3C文档 margin重叠之一：
The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
清清楚楚写的bottom margin和top margin会重叠；然而，这是CSS2文档中的描述，在CSS3的世界中，由于 writing-mode 的存在，这种说法就不严谨了，应该是对立流方向的margin值会发生重叠。换句话说，如果元素是默认的水平流，则垂直margin会重叠；如果元素是垂直流，则水平margin会重叠。
您眼见为实，您可以狠狠地点击这里： CSS writing-mode与margin水平重叠demo
结果：
2. 可以使用margin:auto实现垂直居中
我们应该都是的，传统的web流中， margin 设置 auto 值的时候，只有水平方向才会居中，因为默认 width 是 100% 自适应的， auto 才有计算值可依，而垂直方向，height没有任何设置的时候高度绝不会自动和父级高度一致，因此， auto 没有计算空间，于是无法实现垂直居中。但是，在 writing-mode 的世界里，纵横规则已经改变，元素的行为表现发生了翻天覆地的变化。
3. 可以使用text-align:center实现图片垂直居中
前面提过， auto 无法实现IE浏览器下的图片垂直居中，如果我们非要让图片垂直居中，可以使用 text-align:center ，您可以狠狠地点击这里： CSS writing-mode与图片text-align:center垂直居中demo
结果，之前病恹恹的IE浏览器活了：
由于我们直接使用内联特性进行控制的，因此，IE7浏览器也是可以实现 text-align:center 下的图片垂直居中，但是，根据我在IE11↘IE7下的测试， writing-mode 需要写在最后重置下（原生估计不会这样），因此，完整的 writing-mode 代码为：
.verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *writing-mode: tb-rl;}ログイン後にコピー
4. 可以使用text-indent实现文字下沉效果
这是真实项目例子，要增加一个按钮按下文字下沉的效果。如果你来实现，你会这么实现呢？行高控制？但默认文本就不居中。padding+height精确控制，又略烦。然而，在 writing-mode 垂直流下，我们又有了新思路，例如，直接使用 text-indent 实现垂直方向的控制，没想到吧，无需关心height高度padding间距大小，任何按钮都可以通用，因为 text-indent 不会影响元素原本的盒布局。
您可以狠狠地点击这里： CSS writing-mode与text-indent文字下沉效果demo
包括IE7在内的浏览器都是支持的(同上最后要 *writing-mode 覆盖下)都是支持下沉的。
为什么有如此的实现呢？这要归功于中文，在垂直流排版的时候，中文是不会旋转的，还是直立的，也就是说，虽然我们肉眼看上去文字没什么变化，但是，布局流已经发生了变化，以前类似 text-indent / letter-spacing 等水平控制属性都作用在垂直方向了。
もちろん、この例ではボタン テキストが 1 つしかないという偶然がありますが、ボタン テキストが複数ある場合、これはそれほど簡単で素晴らしいものではありません。
5. 完全に互換性のあるアイコン フォントの回転効果を実現できます
古い IE ブラウザで小さなアイコンの回転効果を実現するのは面倒ですか? IEの回転フィルターや反転フィルターを使用するには、以前の「Webページのリソースの再利用性を向上させるCSSの垂直反転/水平反転」と「IEマトリックスフィルターのマトリックスの回転と結合変換のスケーリングと拡張」の記事を参照してください。
書き込みモードがあるので、それほど心配する必要はありません。
ライティング モードで文書が垂直方向に変わると、英語と数字の記号が「横たわって」表示されることに以前から気づいていたかもしれません。これは自然な 90 度の回転です。この時点で、アイコン フォント テクノロジを使用して、これらの文字を小さなアイコンに直接マッピングできれば、小さなアイコンの回転を実現するのは簡単ではないでしょうか。何千年も前に廃止されたIE6とIE7で閲覧できます。 フィルターもサポートされており、フィルターなどよりもはるかに簡単です。
百聞は一見に如かず、ここをクリックしてください: 書き込みモードでアイコン フォントを実装、アイコン回転効果のデモ
IE7 ブラウザでも非常に強力です。
6. 高さを活かした適応性の高いレイアウト
くそ、うまくいかない、コンテンツが多すぎて無理メーデーまでに終わらせて… …
次の 7、8、9、10 は飛ばしましょう~~
要するに、理論的には、頭を解放することです。 -mode を使用すると、以前よりも 50% 多くのことができるようになります。それは、単に思いつかない、または実行できないというだけの理由からです。
4. 書き込みモードと方向の関係
CSS の方向属性は先月導入されたばかりですが、これも良い点です。 詳細については、「CSS の入門と実践」を参照してください。 「方向属性」はテキストの方向を変更できますが、書き込みモードとの関係は何ですか?
writing-mode、direction、unicode-bidi (MDN ドキュメント) は、テキスト レイアウトの流れを変更できる CSS の世界の 3 つの主要なプロパティです。このうち、direction と unicode-bidi は近い関係にあり、CSS3 の all プロパティの影響を受けない唯一の CSS プロパティでもあり、基本的には inline 要素と併用されると言われています。アラビア語のテキスト用に設計されているようです。
一見すると、writing-mode には、direction と unicode-bidi のいくつかの機能と動作が含まれているように見えます。たとえば、vertical-rl の rl は、右から左への方向の rtl 値と類似しています。 。しかし、実際には、この 2 つは交わることがありません。このとき、vertical-rl のドキュメント フローは垂直であるため、rl は水平方向を表し、このとき、direction:rtl が設定されます。実際、値 rtl は、インライン要素のテキストの方向を垂直方向に 1 つ変更します。水平に 1 つ、垂直に 1 つ、交差なし。さらに、書き込みモードはブロック要素に影響を与え、CSS 世界の垂直方向と水平方向のルールを直接変更する可能性があり、これは方向よりもはるかに強力で狡猾です。そして東アジアの文字をデザインしたらしいとのこと。
しかし、CSS の不思議な点は、一部の機能はもともと特定のグラフィックやテキストのレイアウトをデザインするために使用されていたかもしれませんが、その機能を使用して創造性を発揮し、他の多くの予期せぬ効果を実現できることです。したがって、上で紹介した三銃士はすべて非常に優れたリソースです。
5. writing-mode 属性と *-start 属性のストリーミング メカニズム
CSS3 には、次のような *-start / *-end 属性 (CSS 論理属性とも呼ばれます) が多数あります。 -start / margin-end 、 border-start / border-end 、padding-start / padding-end 、および text-align:start / text-align:end ステートメント。
次の疑問は、なぜこれほど多くの *-start / *-end ゴーストが出現するのかということです。
それは、最新のブラウザーが老江湖方向を含むストリーミングと、近年それに続く書き込みモードのサポートを強化しているためです。
昔、私たちの理解では、Web ページのレイアウトには左から右、上から下という流れの方向があったため、問題なく margin-left / margin-right を使用していました。ただし、フローが変更される可能性がある場合、たとえば、画像が左端から 20 ピクセル離れていて、ドキュメント フローを右から左へ、同時に右側から 20 ピクセル離れているようにしたいとします。 、どうすればいいでしょうか？
現時点では、画像の方向が変更された後は margin-left:20px は無効になりますが、いわゆる start はドキュメント フローが開始する方向を指します。つまり、ページがデフォルトのドキュメント フローである場合、margin-start は margin-left と同等であり、水平方向の右から左へのドキュメント フローである場合、margin-start は margin-right と同等です。マージンエンドも同様です。
Webkit ベースのブラウザは、*-before と *-end もサポートしています。ただし、デフォルトでは、margin-before は margin-top に似ており、margin-after は margin-after に似ています。 , 仕様では言及されていないようで、FireFox ではサポートされていないのですが、*-before と *-after が登場する機会はあまりありません。実際、writing-mode では、*-start / *-end がすでに論理位置のニーズを満たすことができ、水平方向と垂直方向の両方を制御でき、古い *-top / *-bottom は反対方向に適用されます。
例えば、writing-mode の値をvertical-rl に設定すると、margin-start と margin-top が同時に存在する場合、それぞれがカバーされます。その他は重量に応じて先着順となります。
ご覧のとおり、シーンによってはマージンスタートの機能が使えず、上下左右に動く世界のスターのような存在です。
*-start / *-end については、今後機会があれば詳しく説明するのでここまでとします。現時点では実際のプロジェクトでは使用されないと予想されます。 。
6. まとめ
突然歌いたくなった「やっと待ったけど、諦めなくて良かった…」
この記事先週末から書き始めて、2週間後の今日まで書き終えていません。
第一に、新しい環境に変わり、体内時計が慣れていないこと、第二に、仕事が忙しく、残業が多いこと、第三に、母親のところに行かなければならないことです。 4番目に、記事がたくさんあるので、多くの時間帯を見つけるのが難しいです。
今のところ、メーデーまでに終わらせるのは問題ないようです。これは休暇前の小さな願いです。
OK、真剣に話しましょう。
4月の新シリーズには良い映画がたくさんあります。例えば、『RE:ゼロから始める異世界生活』はストーリーも良く、『僕のヒーローアカデミア』は『ワンパンマン』の前日譚と言われています。ああ、男主人公がダメすぎる、『文豪ストレイドッグス』もあるよ。後期は男主人公が良すぎると言われてるけど…
読んでいただきありがとうございます。記事内の間違いについてのフィードバックは歓迎です。
この記事はオリジナル記事であり、頻繁に更新され、一部の間違いは修正されますので、転載する場合は（画像を直接リンクしないでください）お願いします。トレーサビリティを容易にし、誤った知識による誤解を避けるために元のソースを保持し、より良い読書体験を提供します。
この記事の URL: http://www.zhangxinxu.com/wordpress/?p=5352
(この記事はここまで)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
