neat-annotations: librería CSS para anotaciones con flechas y etiquetas manuscritas

¿Qué es neat‑annotations?

neat‑annotations es un CSS puro que permite insertar flechas y etiquetas manuscritas en la página. Solo se necesita incluir la hoja de estilos y marcar los elementos con clases específicas.

Cómo usarlo

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/syabro/neat-annotations/neat-annotations.css">

Para anotar un elemento basta con añadir la clase ann y opcionalmente una de las clases de dirección (ann-n, ann-ne, etc.) y de color (ann-amber, ann-blue, etc.). El texto de la etiqueta se extrae del atributo data-note.

<span class="ann ann-n" data-note="puntos al norte">objetivo</span>

Si el elemento ya tiene un relleno, se puede evitar la marca con ann-no-mark.

Personalización

El paquete expone variables CSS que se pueden sobreescribir directamente en el elemento:

• --ann-color: color de flecha, etiqueta y resaltado.
• --ann-mark: tono de resaltado.
• --ann-font: fuente de la etiqueta (por defecto Shantell Sans).
• --ann-target-gap, --ann-label-gap, --ann-lower-label-gap: espacios.
• --ann-label-max-width: ancho máximo antes de envolver.
• --ann-arrow-x, --ann-arrow-y, --ann-text-x, --ann-text-y, --ann-rotate: posiciones y rotación.

Con light‑dark() se pueden crear colores adaptables a temas claros y oscuros.

Compatibilidad y licenciamiento

El script funciona en todos los navegadores modernos, ya que no requiere JavaScript ni pasos de compilación. Se distribuye bajo la licencia MIT, lo que facilita su integración en proyectos internos o comerciales.

Por qué importa

neat‑annotations simplifica la creación de diagramas y documentación visual dentro de una aplicación sin añadir dependencias externas. Su enfoque de CSS puro lo hace ideal para equipos que prefieren evitar sobrecargar el bundle con librerías JavaScript.

Para más detalles, visita el repositorio.