Descripción general

generaltranslation@8.1.0 introduce formatCutoff(), una función de truncación de texto que tiene en cuenta la configuración regional y gestiona los límites de caracteres con terminadores adecuados para distintos idiomas.

Motivación

La truncación del texto de la interfaz de usuario suele basarse en CSS text-overflow: ellipsis o en un simple recorte de cadenas, pero estos enfoques no tienen en cuenta las convenciones específicas de cada configuración regional. Los distintos idiomas usan diferentes caracteres de puntos suspensivos, espacios y reglas de puntuación cuando el texto se corta.

Además, cuando las traducciones con IA están sujetas a límites de caracteres, a menudo es necesario aplicar esos límites estrictamente en el lado del cliente como mecanismo de respaldo.

Uso

formatCutoff() está disponible tanto como método de instancia de GT como función autónoma:

import { GT, formatCutoff } from 'generaltranslation'

const gt = new GT({ targetLocale: 'en-US' })

// Truncación básica
gt.formatCutoff('Hello, world!', { maxChars: 9 })
// Devuelve: 'Hello, w…'

// Función autónoma
formatCutoff('Hello, world!', { 
  locales: 'fr-FR', 
  maxChars: 9 
})
// Devuelve: 'Hello, w\u202F…'  // Nota: espacio estrecho antes de la elipsis

maxChars negativo

Los valores negativos recortan desde el final y añaden el terminador al principio:

gt.formatCutoff('Hello, world!', { maxChars: -4 })
// Devuelve: '…ld!'

Terminadores específicos según la configuración regional

Cada configuración regional usa un estilo distinto de puntos suspensivos:

// El chino y el japonés usan puntos suspensivos dobles
formatCutoff('你好世界', { locales: 'zh-CN', maxChars: 4 })
// Devuelve: '你好……'

// El francés usa espacio fino de no separación antes de los puntos suspensivos  
formatCutoff('Bonjour', { locales: 'fr-FR', maxChars: 6 })
// Devuelve: 'Bonj\u202F…'

Terminadores personalizados

Sobrescribe el comportamiento predeterminado con terminadores y separadores personalizados:

gt.formatCutoff('Long text here', {
  maxChars: 13,
  terminator: '...',
  separator: ' '
})
// Devuelve: 'Long text ...'

Sin terminador

Usa el estilo 'none' para truncar sin terminador:

gt.formatCutoff('Hello, world!', {
  maxChars: 5,
  style: 'none'
})
// Devuelve: 'Hello'

Base para las bibliotecas de interfaz de usuario

Esta funcionalidad sirve como capa base para implementaciones específicas de interfaz de usuario en gt-react y gt-next, que expondrán subconjuntos de esta funcionalidad adecuados para sus respectivos frameworks.