Vue d’ensemble

generaltranslation@8.1.0 introduit formatCutoff(), une fonction de troncature de texte adaptée à la locale, qui gère les limites de caractères avec des signes de fin appropriés pour différentes langues.

Motivation

La troncature du texte d’interface utilisateur repose généralement sur la propriété CSS text-overflow: ellipsis ou sur un simple découpage de chaînes, mais ces approches ne tiennent pas compte des conventions propres à chaque locale. Les différentes langues utilisent des ellipses, des espacements et des règles de ponctuation différents lorsque le texte est coupé.

De plus, lorsque les traductions générées par IA sont soumises à des limites de caractères, il est souvent nécessaire de faire respecter strictement ces limites côté client, comme mécanisme de secours.

Utilisation

formatCutoff() est disponible à la fois en tant que méthode d’instance de GT et en tant que fonction autonome :

import { GT, formatCutoff } from 'generaltranslation'

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

// Troncature de base
gt.formatCutoff('Hello, world!', { maxChars: 8 })
// Renvoie : 'Hello, w…'

// Fonction autonome
formatCutoff('Hello, world!', { 
  locales: 'fr-FR', 
  maxChars: 8 
})
// Renvoie : 'Hello, w\u202F…'  // Notez l'espace fine avant les points de suspension

maxChars négatif

Les valeurs négatives découpent depuis la fin et placent le terminateur au début :

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

Terminateurs propres à chaque locale

Différentes locales utilisent des styles de points de suspension différents :

// Le chinois et le japonais utilisent des points de suspension doubles
formatCutoff('你好世界', { locales: 'zh-CN', maxChars: 4 })
// Renvoie : '你好……'

// Le français utilise une espace insécable fine avant les points de suspension  
formatCutoff('Bonjour', { locales: 'fr-FR', maxChars: 5 })
// Renvoie : 'Bonj\u202F…'

Délimiteurs personnalisés

Outrepassez le comportement par défaut à l’aide de délimiteurs et de séparateurs personnalisés :

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

Sans terminateur

Utilisez le style 'none' pour tronquer sans caractère de terminaison :

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

Base pour les bibliothèques d’interface utilisateur

Ces fonctionnalités constituent la couche de base des implémentations spécifiques à l’interface utilisateur dans gt-react et gt-next, qui exposeront des sous-ensembles de ces fonctionnalités adaptés à chacun de ces frameworks.