soy Kseso y esto EsCSS

Notas al margen puro CSS

Cómo mostrar notas aclaratorias, una variación del clásico tooltip, en el margen lateral y si no hay espacio para en él en la parte inferior o superior.

Notas al margen puro CSS

·Por Kseso ✎ 1
Notas al margen puro CSS

Las notas al margen podrían considerarse un caso particular de los tooltips o esa información que, oculta por defecto, se muestra al poner el cursor sobre algún elemento y que lo complementa o explica.

Caso particular porque no se muestra adyacente al elemento que complementa. Lo hace en el margen lateral sin superponerse ni tapar ningún otro elemento de la página.

De entrada en el caso de las notas al margen la única cuestión a resolver es cómo desplazar y mostrar su contenido con independencia de dónde aparezca el elemento al que complementa. Elemento que en la mayoría de los casos es textual y de tipo inline (como un span) dentro de un párrafo.

Otra cuestión, un poco secundaria para la la finalidad de este artículo es qué marcado HTML utilizar para alojar la información de la nota.

Aunque en las especificaciones encontramos algunos elementos que podría encajarnos, como abbr, dfn, q... hasta incluso details y su hijo summary no parece que ninguna de ella se ajuste a la variedad (por semántica) a lo que podemos añadir estas notas.

Así que para la demo he optado por otra vía. Usar un elemento span para marcar el término, expresión, abreviatura a la que deseemos añadir una nota explicativa. Y para el contenido explicativo utilizar un atributo de autor del tipo data-algo y mostrarlo con su pseudoelemento correspondiente.

Tal que así:

<h1>Notas al margen <span data-n_m='sin necesidad de recurrir a otros lenguajes como javascript'> puro CSS</span> </h1> <p>Siempre insisto en que éste es un blog sobre <span data-n_m='"Cascading Style Sheets" u hojas de estilo en cascada'> CSS</span>... </p>

También se podría optar por dos elementos consecutivos para el término y su nota. Facilitaría algo componer el CSS y daría un poco más de juego para ciertas realizaciones. Pero no sería tan divertido ;-)

<p>Siempre insisto en que éste es un blog sobre <span class='definido'>CSS</span> <span class='define'>"Cascading Style Sheets" u hojas de estilo en cascada</span> ... </p>

Consideraciones de las notas al margen

Hay unos aspectos obvios a tener en cuenta si vamos a mostrar notas al margen. Y, por lo tanto, asegurarnos de que los cumplimos:

  1. Que haya al menos un margen y que sea lo suficientemente grande como para que quepa la nota
  2. Que en caso contrario, como pantallas estrechas, la nota no se muestre en el lateral sino por arriba o por abajo. Y que los contenidos en el primer elemento (o último) no lo hagan fuera del viewport.
  3. Que se muestre en el margen (del h1 o del párrafo del código de ejemplo previo) o fuera de él con independencia de dónde aparezca el span.
  4. Que el contenido sólo se muestre a demanda del usuario. Mediante un :hover, por ejemplo.
  5. Que cada nota y su "termino" queden asociados de alguna forma. Y nada como numerar ambos con el mismo numeral.

Para lo primero, existencia de margen, sólo tenemos que limitar la anchura del elemento contenedor del span.

El segundo punto, pantallas estrechas o margen insuficiente, con su media query correspondiente queda arreglado. Así posicionaremos la nota en el margen lateral o por arriba/abajo del elemento padre.

En pantallas pequeñas, si se muestra la nota en el borde inferior del elemento padre, se corre el peligro de que las del último elemento queden fuera de la vista. Para ello está la pseudoclase :last-child

Para cumplir el cuarto punto, sólo es cuestión de asegurarnos que el span tenga declarado position: static. Así, como es de sobra conocido, no será referente para posicionar y dimensionar su pseudoelemento.

Para la última condición, asignar numeración al span y su nota al margen, tenemos los "contadores CSS".

Sin demo... dragones en el garaje

Todo lo anterior puesto en código HTML y CSS lo puedes ver en el siguiente pen o demo:

See the Pen amVGJv by Kseso (@Kseso) on CodePen.

Dependiendo del tamaño de tu monitor y mostrando/ocultado la parte del código verás mostrarse la nota o bien al margen o en la parte inferior del párrafo. Excepto del último que se muestra por arriba.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso