検索
ホームページウェブフロントエンドCSSチュートリアルcssのdirection属性とwriting-mode属性の違い

cssのdirection属性とwriting-mode属性の違い

Jun 20, 2017 am 10:05 AM
cssdirection違い属性

CSS では、writing-modedirection は両方ともテキストの表示方向を制御するために使用されますが、それらの間には違いがあります。

書き込みモードのパラメータには、lr-tb (左と右 - 上と下) tb-rl (上と下 - 右と左) が含まれます。西洋諸国では通常、書き込み方法は左と右 - 上と下です。 , しかし、たとえばアジア諸国では、古代中国の詩は右から左に書かれており、writing-mode 属性が反映されています。

例:

<div class="mode">  
  <h3 id="登鹳雀楼">登鹳雀楼</h3>  
<p>白日依山尽,<br>黄河入海流.<br>欲穷千里目,<br>更上一层楼。</p>  
</div>
.mode{  
            writing-mode: tb-rl;      
        }  
        p{  
            font-size: 24px;  
        }

表示される効果:

cssのdirection属性とwriting-mode属性の違い

方向パラメータ ltr (左から右) および rtl (右から左)。

方向を使用して、テキストの書き込み方向が左から右か右から左かを制御します。

まず第一に、layout-flow: オブジェクトのテキストコンテンツのフローも制御します (ただし、この属性はwriting-mode属性で置き換えることができます)

CSSでは、writing-modeとdirectionは両方とも設定に使用されますテキストの表示方法にはいくつかの共通点がありますが、本質的な違いもあります。まずは 2 つの使い方を紹介しましょう:

writing-mode

文法:

writing-mode : lr-tb | tb-rl

パラメータ:
lr-tb: left-right、up-down
tb-rl: up-down、right-left

説明:
オブジェクトのコンテンツブロックの固有の書き込み方向を設定または取得します。西洋言語では、左から右、上から下の書き方が使用されます。しかし、アジアの言語には、上から下、右から左への書き方があることがよくあります。
この属性の値が変更されると、text-align属性とvertical-align属性の機能も変更されます。
対応するスクリプト機能はwritingModeです。私が書いた他の本もご覧ください。

direction

構文:

direction: ltr | rtl

パラメータ:

ltr : left-right
rtl : right-left

説明:

direction 属性は、テキストの書き込み方向が左から右かどうかを設定します。右から左へ行います。

上記の比較を通じて、左から右または右から左など、テキストの表示方法だけであれば、方向を使用することが多く、さまざまな書き方の習慣に対処するために、方向を使用することが多いと結論付けることができます。テキスト、特にからのテキスト 古代中国の文字を書く方法のように、縦書きで書くときは、書き込みモードを使用する必要があります。

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Draggin&#039;ドロップピン&#039;反応でDraggin&#039;ドロップピン&#039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェア高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションバックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない&#039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか?ページの上部にスクロールする必要がありますか?Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best(GraphQL)APIはあなたが書くものですBest(GraphQL)APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境