戻る

generaltranslation@8.1.0

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

概要

generaltranslation@8.1.0 では、ロケールに対応したテキスト切り詰め関数 formatCutoff() が導入され、言語ごとに適切な終端記号を用いて文字制限に対応できます。

背景

UI テキストの切り詰めには、通常 CSS の text-overflow: ellipsis や単純な文字列の切り出しが使われますが、こうした方法ではロケールごとの慣習を考慮できません。テキストを途中で省略する際に使う省略記号、空白、句読点のルールは、言語によって異なります。

さらに、AI 翻訳に文字数制限がある場合は、フォールバックとしてその制限をクライアント側で厳密に適用する必要が生じることがよくあります。

使用

formatCutoff() は、GT のインスタンスメソッドとしても、スタンドアロン関数としても使用できます。

import { GT, formatCutoff } from 'generaltranslation'

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

// 基本的な切り詰め
gt.formatCutoff('Hello, world!', { maxChars: 9 })
// 戻り値: 'Hello, w…'

// スタンドアロン関数
formatCutoff('Hello, world!', { 
  locales: 'fr-FR', 
  maxChars: 9 
})
// 戻り値: 'Hello, w\u202F…'  // 省略記号の前にナロースペースが入ることに注意

負の maxChars

負の値を指定すると、末尾から切り取り、先頭に終端記号を付加します。

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

ロケールごとの終端記号

ロケールによって、省略記号のスタイルは異なります：

// 中国語と日本語は二重省略記号を使用
formatCutoff('你好世界', { locales: 'zh-CN', maxChars: 4 })
// 返り値: '你好……'

// フランス語は省略記号の前にナロー・ノーブレークスペースを使用  
formatCutoff('Bonjour', { locales: 'fr-FR', maxChars: 6 })
// 返り値: 'Bonj\u202F…'

カスタム終端記号

カスタムの終端記号と区切り文字で、デフォルトの動作を上書きできます。

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

終端記号なし

終端記号を付けずに切り詰めるには、'none' スタイルを使用します。

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

UI ライブラリの基盤

この機能は、gt-react と gt-next における UI 固有実装のベースレイヤーとして機能し、各フレームワーク向けに適した機能のサブセットが公開されます。