Propiedades del texto
A continuación algunas propiedades del texto: direction, hanging-punctuation, hyphens, initial-letter, letter-spacing, quotes, text-align, text-align-last, text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-skip-ink, text-decoration-style, text-indent, text-justify, text-overflow, text-shadow, text-stroke, text-fill-color, text-transform.
direction
La propiedad direction se utiliza para indicar en que dirección fluye el texto: rtl: de derecha a izquierda o ltr: de izquierda a derecha. En castellano el texto fluye de izquierda a derecha, sin embargo en idiomas como el árabe o el hebraico el texto va de derecha a izquierda.
Posibles valores:
ltr: left to right - De izquierda a derecha. Es el valor por defecto.
rtl: right to left - De derecha a izquierda.
inherit: hereda la dirección del texto del elemento padre.
direction: ltr | rtl | inherit;
Ejemplo:
.elTexto {
direction: rtl; /* right to left - de derecha a izquierda */
}En el HTML hay el atributo dir utilizado con el mismo propósito:
<body dir="rtl">Tanto el valor del atributo como el valor de la propiedad serán heredados por los elementos descendientes.
También hay una etiqueta HTML utilizada para cambiar la dirección del texto: <bdo> donde bdo es el acrónimo de bidirectional override element.
<bdo dir="rtl">Texto de derecha a izquierda.</bdo>Vea este ejemplo en el cual utilizo la propiedad direction como pequeño truco para realizar esta clasificación de 5 estrellas
hanging-punctuation
La propiedad hanging-punctuation puede ser traducida como puntuación colgante o suspendida es una propiedad experimental utilizada para mover ( o no ) algunos signos de puntuación ( punto, coma, comillas, viñetas ...etc ) fuera de la caja, para dar al texto un aspecto visualmente agradable.
Posibles valores:
La propiedad hanging-punctuation puede utilizar uno dos o tres de los siguientes valores:
none: ningún carácter no aparece fuera de la caja.
first: un primer corchete o la comilla izquierda del texto esta fuera de la caja.
last: el corchete final o la comilla derecha "cuelga" fuera de la caja.
force-end: empuja un punto o una coma al final de línea que salga fuera de la caja
force-end: empuja un punto o una coma al final de línea que salga fuera de la caja
Ejemplos:
/* una palabra clave */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;
/* dos palabras clave */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;
/* tres palabras clave */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;hyphens
La propiedad hyphens decide como separar las palabras con guiones a finales de línea.
hyphens: none | manual | auto
Es importante que el elemento padre del elemento seleccionado tenga el atributo lang ( que define el lenguaje utilizado ):
<article lang="es"></article>
article p {
hyphens: auto;
}Posibles valores:
none: las palabras no tienen nunca guiones, ni tan solo cuando caracteres dentro de las palabras sugieren donde hay que poner los guiones.
manual: es posible utilizar caracteres especiales dentro de las palabras para sugerir donde hay que poner los guiones.
- El llamado guión suave ( soft hyphen ) aparece solo si hay un salto de línea. Los caracteres a utilizar para el guión suave son:
­,­o­Wikipedia: Soft_hyphen
- El llamado guión duro ( hard hyphen ) aparece siempre aunque no hay salto de línea.‑‑Wikipedia: Hard and soft hyphens
auto: sugiere la separación silábica de las palabras a finales de línea en puntos con guiones suaves o sin.
En el siguiente ejemplo redimensione la página para ver aparecer y desaparecer los guiones a finales de línea. Por favor observe que en el HTML el elemento padre tiene el atributo lang: <article lang="es"> y en el CSS text-align: justify;
See the Pen hyphens: demo*** by Gabi (@enxaneta) on CodePen.
initial-letter
La propiedad initial-letter selecciona la primera letra de un elemento y establece el número de líneas que debe ocupar ( en este momento solo en Safari ).
initial-letter: 2;letter-spacing
La propiedad letter-spacing establece el espaciado entre caracteres de texto. Puede ser utilizada para eliminar o reducir el espacio entre caracteres ( valores negativos ) o para espaciar los caracteres ( valores positivos ).
La propiedad letter-spacing es heredada, o sea los elementos hijos del elemento seleccionado tendrán el mismo espaciado de caracteres.
letter-spacing: normal | longitud | inherit
Algunos ejemplos:
.normal { letter-spacing: normal; }
.ancho { letter-spacing: 0.4em; }
.mas-ancho { letter-spacing: 1em; }
.apretado { letter-spacing: -0.05em; }quotes
Los elementos <q> y <blockquote> indican que el texto que aparece dentro es una cita. Sin embargo el texto no aparece entre comillas. En CSS la propiedad quotes pone el texto entre comillas y establece el aspecto de las comillas para estos elementos.
/*establece las comillas a utilizar*/
q { quotes: "«" "»"; }
/* Establece dos niveles de comillas */
q { quotes: "«" "»" "‹" "›"; }See the Pen CSS quotes*** by Gabi (@enxaneta) on CodePen.
Alternativamente podemos utilizar los pseudo-elementos ::before y ::after para poner las citas entre comillas:
q::before { content: open-quote }
q::after { content: close-quote }text-align
La propiedad text-align establece la alineación horizontal de elementos inline ( como texto o imágenes ) en un elemento de bloque o de una celda de tabla.
text-align: start | end | left | right | center | justify | match-parent
La propiedad text-align es heredada lo que significa que los elementos hijos tendrán la misma alineación.
Posibles valores:
left: el texto se alinea a la izquierda.
right: el texto se alinea a la derecha.
start: en idiomas como el castellano, con un sistema de escritura de izquierda a derecha ( ltr – left to right ), el texto se alinea a la izquierda.
end: en idiomas como el castellano, con un sistema de escritura de izquierda a derecha ( ltr – left to right ), el texto se alinea a la derecha.
center: el texto se alinea en el medio.
justify: el texto se justificará de acuerdo con lo establecido con la propiedad text-justify.
text-align-last
La propiedad text-align-last establece la alineación horizontal de la última línea de texto en un elemento bloque justo antes de un salto de línea, por ejemplo antes de un <br>; o al final del párafo <p>.
text-align-last: auto | start | end | left | right | center | justify
Posibles valores:
left: el texto se alinea a la izquierda.
right: el texto se alinea a la derecha.
start: en idiomas como el castellano, con un sistema de escritura de izquierda a derecha ( ltr – left to right ), el texto se alinea a la izquierda.
end: en idiomas como el castellano, con un sistema de escritura de izquierda a derecha ( ltr – left to right ), el texto se alinea a la derecha.
center: el texto se alinea en el medio.
justify: el texto se justificará de acuerdo con lo establecido con la propiedad text-justify
See the Pen CSS text-align-last*** by Gabi (@enxaneta) on CodePen.
text-decoration
La propiedad text-decoration se utiliza para añadir una decoración al texto. La decoración puede ser una línea debajo del texto, superpuesta al texto o por encima del texto.
Representa la declaración abreviada de las propiedades text-decoration-line, text-decoration-color, text-decoration-style y de la nueva text-decoration-thickness.
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
See the Pen CSS text-decoration*** by Gabi (@enxaneta) on CodePen.
text-decoration-color
La propiedad text-decoration-color establece el color de las decoraciones del texto añadidas con text-decoration-line. Puede tomar como valor un color hex, rgb, rgba, hsl, hsla o nombres de colores.
El valor por defecto de text-decoration-color es el valor de la propiedad color del texto.
text-decoration-line
La propiedad text-decoration-line establece el tipo de decoración utilizada para el texto que puede ser una línea debajo del texto ( underline ), superpuesta al texto ( line-through ) o por encima del texto ( overline ).
text-decoration-line: none | underline || overline || line-through
text-decoration-skip
La propiedad text-decoration-skip es una propiedad experimental que establece dónde y cómo interrumpir la línea decorativa del texto declarada con text-decoration-line.
text-decoration-skip: none | objects | spaces | edges | ink | box-decoration
See the Pen CSS text-decoration-skip*** by Gabi (@enxaneta) on CodePen.
text-decoration-skip-ink
La propiedad text-decoration-skip-ink es una propiedad experimental ( en este momento funciona en FireFox Chrome y Opera) que establece dónde y cómo interrumpir la línea decorativa de un texto declarada con text-decoration-line. Equivalente de text-decoration-skip: ink;
text-decoration-skip-ink: auto | none
text-decoration-style
La propiedad text-decoration-style especifica el estilo de línea utilizada para la decoración de un texto ( declarada con text-decoration-line ) y puede tomar una de los siguientes valores: solid ( línea continua ) double ( línea doble ) dotted ( línea punteada ) dashed ( línea discontinua ) y wavy ( línea ondulada ).
text-decoration-style: solid | double | dotted | dashed | wavy
See the Pen CSS text-decoration-style*** by Gabi (@enxaneta) on CodePen.
text-indent
La propiedad text-indent especifica el sangrado ( la indentación ) de la primera línea de texto de un elemento de bloque.
El sangrado del texto es relativo al margen izquierdo del bloque si la dirección del texto es ltr ( left to right o de izquierda a derecha ). En textos con una dirección de derecha a izquierda ( direction: rtl ) el sangrado del texto es relativo al margen derecho del bloque.
text-indent: longitud | porcentaje | inherit
See the Pen text-indent by Gabi (@enxaneta) on CodePen.
text-justify
Cuando se justifica el texto utilizando text-align: justify; el CSS agrega espacios entre palabras o entre caracteres para que los bordes de cada línea se alineen con ambos márgenes. Podemos establecer el tipo de justificación del texto ( espacios entre palabras o espacios entre caracteres ) utilizando la propiedad text-justify.
text-justify: auto | inter-character | inter-word | none
Posibles valores:
auto: deja al ordenador que decida como espaciar el texto para que los bordes de cada línea se alineen con ambos márgenes.
inter-character: el CSS agrega espacios entre caracteres para que los bordes de cada línea se alineen con ambos márgenes.
inter-word: el CSS agrega espacios entre palabres para que los bordes de cada línea se alineen con ambos márgenes.
text-overflow
La propiedad text-overflow decide que hacer con el texto que sobresale de la caja por ejemplo cuando white-space: nowrap.
text-overflow: clip | ellipsis | "cadena de texto";
Posibles valores
clip: el valor por defecto. El texto que sobresale de la caja esta cortado.
ellipsis: el texto que sobresale de la caja esta cortado y unos puntos suspensivos (ellipsis) indican que falta una parte del texto. Los puntos suspensivos aparecen a la derecha si la dirección del texto es de izquierda a derecha. Si la dirección del texto es de derecha a izquierda los puntos suspensivos aparecen a la izquierda.
una cadena de texto: ( experimental; en este momento funciona solo en Firefox ) en lugar de utilizar los puntos suspensivos podemos utilizar una cadena de texto cualquiera
fade: en un futuro podremos utilizar la palabra clave fade o una función fade() para que el texto se transparente hasta desvanecerse.
See the Pen CSS text-overflow*** by Gabi (@enxaneta) on CodePen.
text-shadow
La propiedad text-shadow aplica una sombra al texto.
text-stroke
La propiedad text-stroke es una propiedad experimental que añade un contorno a los caracteres de texto, similar al stroke de SVG. Representa de hecho la declaración abreviada de dos propiedades: text-stroke-width ( la anchura de línea ) y text-stroke-color ( el color ).
text-stroke: 2px red;/*anchura color*/text-fill-color
La propiedad text-fill-color es también una propiedad experimental similar al atributo fill de SVG utilizada para llenar de color el texto.
See the Pen text-stroke y text-fill-color by Gabi (@enxaneta) on CodePen.
text-transform
La propiedad text-transform especifica como transformar el texto utilizando mayúsculas y minúsculas. Puede ser utilizada para transformar el texto a MAYúSCULAS ( uppercase ), a minúsculas ( lowercase ) o Tipo Titulo ( capitalize )
text-transform: none | capitalize | uppercase | lowercase