#471 · Herramienta para desarrolladores

Unicode Grapheme Cluster Viewer

Separa texto Unicode en grafemas visibles, es decir, las unidades que una persona percibe normalmente como caracteres. Resulta útil con emoji familiares, banderas, tonos de piel, letras con marcas combinadas y otros casos donde un solo símbolo ocupa varios puntos de código o unidades UTF-16.

Datos de entrada

Texto Unicode
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Pega o escribe la entrada en el cuadro principal.
  2. Ajusta las opciones disponibles si la herramienta las muestra.
  3. Pulsa el botón de procesamiento o usa Ctrl/Cmd + Enter.
  4. Revisa el resultado, el resumen y las métricas antes de copiar o descargar.

Qué hace esta herramienta para desarrolladores

Muestra cada cluster de grafema con su índice, contenido visible y puntos de código asociados. Cuando el navegador admite Intl.Segmenter, usa segmentación Unicode consciente del idioma; en navegadores antiguos aplica una aproximación por puntos de código.

Segmenta el texto con Intl.Segmenter({granularity: "grapheme"}) y enumera los puntos de código de cada cluster.

Un grafema no equivale necesariamente a un punto de código ni a una unidad UTF-16.

Ejemplo

Entrada:

👨‍👩‍👧‍👦 café 🇪🇸 á

Resultado: ejecuta el ejemplo incluido para ver la transformación exacta generada por el navegador.

Casos de uso

  • Diagnosticar representaciones Unicode y problemas de codificación.
  • Preparar datos para pruebas, documentación técnica o depuración.
  • Comparar una representación legible con sus bytes o símbolos codificados.

Consejos para obtener resultados fiables

  • Conserva la entrada original para poder comparar.
  • Distingue siempre entre caracteres, puntos de código y bytes.
  • Usa el conversor inverso cuando quieras comprobar una transformación reversible.
  • No trates una codificación como si fuera cifrado.
  • Prueba emoji, acentos y caracteres no ASCII si tu sistema debe admitir Unicode.

Detalles del procesamiento

El procesamiento se ejecuta íntegramente en JavaScript dentro del navegador. Se usan Web APIs estándar como TextEncoder, TextDecoder, Intl.Segmenter o tipos nativos cuando corresponden al objetivo de la página.

Los resultados dependen de los estándares implementados por el navegador. La herramienta no sustituye validaciones del protocolo o formato superior donde se vaya a utilizar la salida.

Preguntas frecuentes

¿Por qué un emoji puede contar como un solo grafema y varios puntos de código?

Porque algunos símbolos visibles combinan varios puntos de código mediante modificadores, selectores de variación o uniones ZWJ.

¿Intl.Segmenter sigue las reglas Unicode de clusters de grafema?

Sí, los navegadores modernos lo implementan sobre reglas Unicode; el resultado puede depender de la versión Unicode disponible en el navegador.

¿Qué ocurre con letras formadas por un carácter y una marca combinada?

Normalmente se muestran como un solo grafema aunque contengan dos o más puntos de código.

¿Sirve para contar caracteres visibles en límites de interfaz?

Sí, es más representativo que length para texto visible, aunque el ancho renderizado puede variar según fuente y sistema.

¿Qué pasa si el navegador no admite Intl.Segmenter?

La página usa un fallback por puntos de código y avisa de que los clusters complejos pueden quedar separados.

Resumen técnico

CategoríaCodificación y decodificación
EntradaTexto Unicode
ProcesamientoLocal en el navegador
SalidaSegmentación por grafemas