Trans

Trans は、翻訳対象のマークアップコンテンツに使う、汎用的なコンポーネントマクロです。

翻訳者がリンク、強調、そのほかの埋め込み構造を保つ必要がある場合に使ってください。 リッチテキストではないメッセージにも使えますが、真価を発揮するのは、メッセージをマークアップとして書くのが自然な場面です。 埋め込みマークアップは構造化されたプレースホルダーとして保持され、補間値がテキストに埋め込まれた固定文字列になることもないため、翻訳者は必要に応じてプレースホルダーの順序や入れ子構造を調整できます。

フレームワークに依存しない Lingui の意味論については、公式の Trans リファレンス を参照してください。

ソース

Demo.svelte カタログ

<p>
  <Trans>
    Say hello to <strong>{name}</strong>.
  </Trans>
</p>

#: src/demos/macros/trans-component/Demo.svelte
msgid "Say hello to <0>{name}</0>."
msgstr "Say hello to <0>{name}</0>."

結果

プレビュー 変換されたSvelte コンパイルされたカタログ

Say hello to Lingui.

<p>
  <L4sRuntimeTrans {.../*i18n*/ {
    id: "Z8ZDKV",
    values: {
      name: name
    }
  }}>
  {#snippet component_0(children)}<strong>{@render children?.()}</strong>{/snippet}
  </L4sRuntimeTrans>
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"Z8ZDKV\":[\"Say hello to <0>\",[\"name\"],\"</0>.\"]}",
) as Messages;

ロケール

EN JA

名前

使い方

Svelte

<script lang="ts">
  import { Trans } from "lingui-for-svelte/macro";
</script>

<Trans>
  Read the <a href="/docs">documentation</a>.
</Trans>

Astro

---
import { Trans } from "lingui-for-astro/macro";
---

<Trans>
  Read the <a href="/docs">documentation</a>.
</Trans>

Official Lingui

import { Trans } from "@lingui/react/macro";

function Component() {
  return (
    <Trans>
      Read the <a href="/docs">documentation</a>.
    </Trans>
  );
}

Trans が向いている場面

• メッセージにリンク、強調、そのほかの埋め込みマークアップを含める
• テキストとマークアップが同じ翻訳単位に属している
• 言語に応じてラッパーの順序や入れ子を翻訳者が調整する必要がある
• 文字列テンプレートよりマークアップとして書くほうが自然である

サポートされる内容の概要

lingui-for-svelte と lingui-for-astro は、どちらも共通のリッチテキストの構造をサポートしています。

• プレーンテキストと補間値
• 入れ子になった HTML ラッパーとコンポーネントラッパー
• プレースホルダーとして使う自己完結型ラッパー

さらに、フレームワーク固有のリッチテキスト hole もサポートしています。

機能	Svelte	Astro
生の HTML ホール	{@html ...}	set:html={...}
レンダー、スニペットホール	{@render ...}	なし
テキスト ホール	なし	set:text={...}

フレームワーク固有の補足

許可されるラッパー構文の正確な範囲は、テンプレート言語によって異なります。

• Svelte では Trans の中で、ラッパーディレクティブ、let:、{@html}、{@render} を使えます。詳しくは Svelte における Trans を参照してください。
• Astro では Trans の中で、class:list、transition:*、client:*、server:*、set:html、set:text を使えます。詳しくは Astro における Trans を参照してください。

一方で、ラッパーで表されないリッチテキスト構文は、意図的にサポートしていません。 たとえば Svelte のブロック構文や、Astro の script、style、is:raw などがこれに当たります。

子ノード間の空白

Trans は内部的には JSX 互換の仕組みで処理されますが、.svelte と .astro のテンプレートは JSX ではありません。 そのため、子ノード間の空白が、本来そのフレームワークで扱われる形と異なって解釈される可能性があります。

既定では、lingui-for-svelte と lingui-for-astro は、Trans とほかのコンポーネントマクロに対して、生の JSX の意味論ではなく、フレームワークを考慮した空白処理を行います。

正確なルール、設定方法、例については コンポーネントマクロにおける空白 を参照してください。