console
<h2>direction: ltr;</h2>
<div class="box-100">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>direction: rtl;</h2>
<div class="box-101">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>text-align: left;</h2>
<div class="box-200">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>text-align:right;</h2>
<div class="box-201">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:horizontal-tb;</h2>
<div class="box-1">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:unset;</h2>
<div class="box-2">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:vertical-lr;文字从上到下从左到右书写</h2>
<div class="box-3">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:vertical-rl;文字从上到下从右到左书写</h2>
<div class="box-4">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:sideways-lr;</h2>
<div class="box-5">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:sideways-rl;</h2>
<div class="box-6">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:vertical-lr;文字从上到下从左到右书写,并且设置text-align:right;</h2>
<div class="box-7">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:vertical-rl;文字从上到下从右到左书写,并且设置text-align:right;</h2>
<div class="box-8">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:vertical-lr;文字从上到下从左到右书写,并且设置direction:ltr;</h2>
<div class="box-9">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
<h2>writing-mode:vertical-rl;文字从上到下从右到左书写,并且设置direction:rtl;</h2>
<div class="box-10">
<div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
<div class="text-2">了解文本的方向性对网页设计师和作者来说很重要，因为从右到左的文本可能更复杂(对初学者来说)，并且会影响页面布局的组织和方向性。因此，了解写作方向有助于估计用新语言创建网页所涉及的工作量。</div>
<div class="text-3">تعد معرفة اتجاه النص أمرا مهما لمصممي الويب والمؤلفين ، لأن النص من اليمين إلى اليسار يمكن أن يكون أكثر تعقيدا (للمبتدئين) للعمل معه ويتأثر تنظيم تخطيط الصفحة واتجاهه. لذلك ، يمكن أن تكون معرفة اتجاه الكتابة ذات صلة بتقدير العمل المتضمن لإنشاء صفحات ويب بلغة جديدة.</div>
</div>
[class*="box"]{
margin-bottom: 40px;
border-bottom: 1px solid #c00;
}
[class*="box"] [class*="text"]{
padding: 10px;
}
.box-100 [class*="text"]{
direction: ltr;
}
.box-101 [class*="text"]{
direction: rtl;
}
.box-200 [class*="text"]{
text-align: left;
}
.box-201 [class*="text"]{
text-align: right;
}
.box-1 [class*="text"]{
writing-mode:horizontal-tb;
}
.box-2 [class*="text"]{
writing-mode:unset;
}
.box-3 [class*="text"]{
float: left;
writing-mode:vertical-lr;
height: 200px;
}
.box-3::after{
content: "";
clear: both;
display: table;
}
.box-4 [class*="text"]{
float: left;
writing-mode:vertical-rl;
height: 200px;
}
.box-4::after{
content: "";
clear: both;
display: table;
}
.box-5 [class*="text"]{
writing-mode:sideways-lr;
}
.box-6 [class*="text"]{
writing-mode:sideways-rl;
}
.box-7 [class*="text"]{
float: left;
writing-mode:vertical-lr;
height: 200px;
text-align: right;
}
.box-7::after{
content: "";
clear: both;
display: table;
}
.box-8 [class*="text"]{
float: left;
writing-mode:vertical-rl;
height: 200px;
text-align: right;
}
.box-8::after{
content: "";
clear: both;
display: table;
}
.box-9 [class*="text"]{
float: left;
writing-mode:vertical-lr;
height: 200px;
direction: ltr;
}
.box-9::after{
content: "";
clear: both;
display: table;
}
.box-10 [class*="text"]{
float: left;
writing-mode:vertical-rl;
height: 200px;
direction: rtl;
}
.box-10::after{
content: "";
clear: both;
display: table;
}