Descripción general

generaltranslation@8.1.0 presenta formatCutoff(), una función para truncar texto sensible al locale que gestiona límites de caracteres con terminadores apropiados para diferentes idiomas.

Motivación

La truncación de texto en la interfaz de usuario (UI) normalmente se basa en el CSS text-overflow: ellipsis o en recortar cadenas de forma simple, pero estos enfoques no tienen en cuenta las convenciones específicas de cada locale. Distintos idiomas usan diferentes caracteres de puntos suspensivos, espaciado y reglas de puntuación cuando el texto se corta.

Además, cuando las traducciones generadas por IA están limitadas por un número máximo de caracteres, a menudo es necesario aplicar estrictamente esos límites en el cliente como contenido de respaldo predeterminado.

Uso

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

import { GT, formatCutoff } from 'generaltranslation'

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

// Truncamiento básico
gt.formatCutoff('Hello, world!', { maxChars: 8 })
// Devuelve: 'Hello, w…'

// Función independiente
formatCutoff('Hello, world!', { 
  locales: 'fr-FR', 
  maxChars: 8 
})
// Devuelve: 'Hello, w\u202F…'  // Nota: espacio estrecho antes de los puntos suspensivos

maxChars negativo

Los valores negativos recortan desde el final y anteponen el terminador:

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

Terminadores específicos por locale

Distintos locales utilizan estilos de puntos suspensivos diferentes:

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

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

Terminadores personalizados

Sobrescribe el comportamiento predeterminado con terminadores y separadores personalizados:

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

Sin terminador

Utiliza el estilo 'none' para truncar sin ningún terminador:

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

Fundamento para bibliotecas de UI

Esta funcionalidad actúa como la capa base para las implementaciones específicas de UI en gt-react y gt-next, que expondrán subconjuntos de esta funcionalidad adecuados a sus respectivos frameworks.