戻る

generaltranslation@8.1.0

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

概要

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

背景

UI テキストの省略には一般的に、CSS の text-overflow: ellipsis や、単純に文字列を切り詰める方法が使われますが、これらの手法は locale 固有の慣習を考慮していません。テキストが途中で切れる場合、言語によって使用される三点リーダーの文字、スペース、句読点のルールが異なります。

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

使い方

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

import { GT, formatCutoff } from 'generaltranslation'

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

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

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

負の maxChars

負の値は末尾からスライスされ、終端文字列が前に付きます。

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

ロケール固有の終端記号

対応ロケールごとに、使用される省略記号のスタイルは異なります。

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

// フランス語では省略記号の前に狭い非改行スペースを使用  
formatCutoff('Bonjour', { locales: 'fr-FR', maxChars: 5 })
// 戻り値: 'Bonj\u202F…'

カスタム終端子

カスタム終端子やセパレーターを指定して、デフォルトの動作を上書きできます。

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

終端記号なし

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

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

UIライブラリの基盤

この機能は、gt-react と gt-next におけるUI固有の実装のための基盤レイヤーとして機能し、各フレームワークに適したこの機能のサブセットを提供します。