La propiedad de orientación de texto en CSS se usa para establecer la orientación del carácter en una línea. Esta propiedad es útil en secuencias de comandos verticales, como crear encabezados de tablas verticales, definir los nombres de las filas, etc.
Sintaxis:
text-orientation: mixed|upright|sideways;
Atributo:
- mixto: este valor se utiliza para rotar el carácter del texto en 90 grados en el sentido de las agujas del reloj. Es el valor predeterminado.
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>
CSS | text-orientation Property
</title>
<style>
h1 {
color:green;
}
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Producción:
- vertical: este valor inicia el texto desde el lado derecho de la pantalla hacia abajo.
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>
CSS | text-orientation Property
</title>
<style>
h1 {
color:green;
}
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Producción:
- hacia los lados: este valor gira la línea de texto 90 grados en el sentido de las agujas del reloj.
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>
CSS | text-orientation Property
</title>
<style>
h1 {
color:green;
}
p {
writing-mode: vertical-rl;
text-orientation: sideways;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Producción:
Nota: La propiedad de orientación del texto depende de la propiedad del modo de escritura , si no se establece en horizontal-tb, entonces esta propiedad funcionará.
Navegadores compatibles: los navegadores compatibles con la propiedad de orientación de texto se enumeran a continuación:
- Google cromo 48
- Borde 79
- Firefox 41
- Ópera 35
- Safari 14
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA