Propiedades del texto

facebook-svg gplus-svg twitter-svg

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: &shy;, &#173; o &#x0AD; Wikipedia: Soft_hyphen
- El llamado guión duro ( hard hyphen ) aparece siempre aunque no hay salto de línea. &#8209; &#x2011; 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