Retour

generaltranslation@8.1.0

Ernest McCarter avatarErnest McCarter
generaltranslation8.1.0formattingtext-truncationlocale-aware

Vue d’ensemble

generaltranslation@8.1.0 introduit formatCutoff(), une fonction de troncature de texte tenant compte du paramètre régional, qui gère les limites de caractères avec des terminaisons adaptées aux différentes langues.


Motivation

La troncature du texte de l’interface utilisateur repose généralement sur la propriété CSS text-overflow: ellipsis ou sur un simple découpage de chaîne de caractères, mais ces approches ne tiennent pas compte des conventions propres au paramètre régional. Selon la langue, les caractères de point de suspension, les espacements et les règles de ponctuation diffèrent lorsque le texte est tronqué.

De plus, lorsque les traductions par IA sont soumises à des limites de caractères, il est souvent nécessaire d’appliquer strictement ces limites côté client, en solution de repli.


Utilisation

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

import { GT, formatCutoff } from 'generaltranslation'

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

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

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

maxChars négatif

Les valeurs négatives tronquent depuis la fin et préfixent le terminateur :

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

Terminateurs spécifiques au paramètre régional

Les différents paramètres régionaux utilisent des styles de points de suspension différents :

// Le chinois et le japonais utilisent un double point de suspension
formatCutoff('你好世界', { locales: 'zh-CN', maxChars: 4 })
// Returns: '你好……'

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

Terminateurs personnalisés

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

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

Aucun terminateur

Utilisez le style 'none' pour tronquer sans ajouter de terminateur :

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

Fondation pour les bibliothèques d’interface utilisateur

Cette fonctionnalité constitue la couche de base des implémentations spécifiques à l’interface utilisateur dans gt-react et gt-next, qui exposeront des sous-ensembles adaptés à leurs frameworks respectifs.