CSS writing-mode Özelliği
CSS3
Bu özellik metinlerin yatay mı dikey mi gözükeceğini belirler.
Yapısı (Syntax)writing-mode: horizontal-tb | vertical-rl | vertical-lr
| Varsayılan Değer | horizontal-tb |
| JavaScript Yapısı |
object.style.writingMode = "vertical-rl"
|
| Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| horizontal-tb | İçeriğin yatay olarak soldan sağa, dikey olarak yukarıdan aşağı görünmesini sağlar. (varsayılan değerdir) | CSS3 |
| vertical-rl | İçeriğin yatay olarak yukarıdan aşağı, dikey olarak sağdan sola görünmesini sağlar. | CSS3 |
| vertical-lr | İçeriğin yatay olarak yukarıdan aşağı, dikey olarak soldan sağa görünmesini sağlar. | CSS3 |
Örnekler
Örneğin bir yazıyı yatayda yukarıdan aşağı olacak şekilde gösterelim.
<div class="box">
<h3>PROTOTURK.COM</h3>
<p>
Bu bir writing-mode örneğidir.
</p>
</div>
<style>
.box {
height: 400px;
width: 400px;
background: red;
display: flex;
}
.box h3 {
writing-mode: vertical-lr;
text-align: center;
}
</style>vertical-rl örneği
<div class="box">
<h3>PROTOTURK.COM</h3>
<p>
Bu bir writing-mode örneğidir.
</p>
</div>
<style>
.box {
height: 400px;
width: 400px;
background: red;
display: flex;
writing-mode: vertical-rl;
}
.box * {
flex: 1;
}
</style>