La propiedad CSS del modo de escritura se utiliza para indicar si las líneas de texto están dispuestas horizontal o verticalmente y también la dirección en la que avanza el bloque.
Sintaxis:
writing-mode: horizontal-tb|vertical-rl|vertical-lr;
Valor por defecto: Su valor por defecto es horizontal-tb.
Valores de propiedad :
- horizontal-tb: este modo permite que el contenido fluya horizontalmente de izquierda a derecha, verticalmente de arriba a abajo. La siguiente línea horizontal se coloca debajo de la línea anterior.
Sintaxis:
writing-mode: horizontal-tb;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>writing-mode Property</title>
<style>
p.geek {
width: 300px;
height: 100px;
border: 1px solid black;
writing-mode: horizontal-tb;
color: white;
background: green;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color:green;">GeeksforGeeks</h1>
<p class="geek">
Geeks Classes is a classroom program in Noida.
This is a quick course to cover algorithms
questions.
</p>
</body>
</html>
Producción:
- vertical-rl: este modo permite que el contenido fluya verticalmente de arriba a abajo, horizontalmente de derecha a izquierda. La siguiente línea vertical se coloca a la izquierda de la línea anterior.
Sintaxis:
writing-mode: vertical-rl;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>writing-mode Property</title>
<style>
p.geek {
width: 200px;
height: 200px;
border: 1px solid black;
writing-mode: vertical-rl;
color: white;
background: green;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color:green;">GeeksforGeeks</h1>
<p class="geek">
Geeks Classes is a classroom program in Noida.
This is a quick course to cover algorithms
questions.
</p>
</body>
</html>
Producción:
- vertical-lr: este modo permite que el contenido fluya verticalmente de arriba a abajo, horizontalmente de izquierda a derecha. La siguiente línea vertical se coloca a la derecha de la línea anterior.
Sintaxis:
writing-mode: vertical-lr;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>writing-mode Property</title>
<style>
p.geek {
width: 200px;
height: 200px;
border: 1px solid black;
writing-mode: vertical-lr;
color: white;
background: green;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color:green;">GeeksforGeeks</h1>
<p class="geek">
Geeks Classes is a classroom program in Noida.
This is a quick course to cover algorithms
questions.
</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores que admiten la propiedad de modo de escritura se enumeran a continuación:
- Google Chrome 48.0
- Borde 12.0
- Internet Explorer 9.0
- Firefox 41.0
- Ópera 35.0
- Apple Safari 10.1
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA