Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

スタイル段落

このページでは、段落のテキストのスタイルを設定する方法について説明します。段落レベルのスタイルを設定するには、textAlign や lineHeight などのパラメータを構成するか、独自の ParagraphStyle を定義します。

テキストの配置を設定する

textAlign パラメータを使用すると、Text コンポーザブルのサーフェス領域内でテキストの水平方向の配置を設定できます。

デフォルトでは、Text はコンテンツの値に応じて自然なテキストの配置を選択します。

Text コンテナの左端: ラテン文字、キリル文字、ハングルなど、左から右に記述するアルファベットの場合
Text コンテナの右端: アラビア語やヘブライ語など、右から左に記述するアルファベットの場合

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}TextSnippets.kt

Text コンポーザブルのテキスト配置を手動で設定する場合は、TextAlign.Left と TextAlign.Right ではなく、それぞれ TextAlign.Start と TextAlign.End を使用することをおすすめします。これらは、優先言語のテキストの向きに応じて、Text コンポーザブルの右端に解決されるためです。たとえば、TextAlign.End では、フランス語テキストは右側、アラビア語テキストは左側に配置されます。一方、TextAlign.Right では、使用されているアルファベットの種類にかかわらず、テキストが右側に配置されます。

1 つの段落に複数のスタイルを追加する

段落に複数のスタイルを追加するには、AnnotatedString で ParagraphStyle を使用します。これには、任意の注釈のスタイルで注釈を付けることができます。テキストの一部が ParagraphStyle でマークされると、その部分は、先頭と末尾に改行コードがあるかのように、残りのテキストから分離されます。

テキストに複数のスタイルを追加する方法については、テキストに複数のスタイルを追加するをご覧ください。

AnnotatedString には、buildAnnotatedString を簡単に作成できるタイプセーフビルダーが用意されています。次のスニペットでは、buildAnnotatedString を使用して ParagraphStyle を設定しています。

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}TextSnippets.kt

3 つの段落を 3 種類のスタイル（青色、赤色と太字、黒色）で表示

行の高さとパディングを調整する

includeFontPadding は、フォント指標に基づいてテキストの最初の行の上と最後の行の下にパディングを追加するレガシープロパティです。Compose BOM バージョン 2024.01.01 以降では、includeFontPadding がデフォルトで false に設定され、デフォルトのテキストレイアウトが一般的なデザインツールに沿ったものになります。

lineHeight を設定する機能は新しいものではなく、Android Q 以降で利用できます。Text の lineHeight を設定するには、lineHeight パラメータを使用します。これにより、テキストの各行で行の高さが割り振られます。その後、新しい LineHeightStyle API を使用して、スペース内でのテキストの配置方法をさらに設定し、空白文字を削除できます。

精度を高めるために、テキストの単位に「sp」（スケール非依存ピクセル）ではなく「em」（相対的なフォントサイズ）を使用して lineHeight を調整することをおすすめします。適切なテキストの単位の選択方法について詳しくは、TextUnit をご覧ください。

真上と真下の行に基づいた測定値として lineHeight を示す画像。 — **図 1.** `lineHeight` セット内のテキストを調整し、必要に応じて追加のスペースをカットするには、Alignment と Trim を使用します。

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)TextSnippets.kt

lineHeight の調整に加えて、テキストを中央に配置してスタイルを設定するには、LineHeightStyle API である LineHeightStyle.Alignment および LineHeightStyle.Trim（Trim を機能させるには、includeFontPadding を false に設定する必要があります）での構成を使用します。Alignment と Trim は、テキストの行間にある測定されたスペースを使用し、1 行のテキストやテキストのブロックの一番上の行を含め、すべての行にスペースをさらに適切に割り振ります。

LineHeightStyle.Alignment は、行の高さによって指定されるスペース内の行の配置方法を定義します。各行内で、テキストを上、下、中央に、または比例して配置できます。LineHeightStyle.Trim を使用すると、lineHeight と Alignment の調整から生成された、テキストの 1 行目の上と最後の行の下の追加のスペースを残すか削除できます。次のサンプルは、アライメントが中央に配置されたとき（LineHeightStyle.Alignment.Center）に、さまざまな LineHeightStyle.Trim 構成で複数行のテキストがどのように表示されるかを示しています。


`LineHeightStyle.Trim.None`	`LineHeightStyle.Trim.Both`

`LineHeightStyle.Trim.FirstLineTop`	`LineHeightStyle.Trim.LastLineBottom`

この変更の背景、includeFontPadding がビューシステムでどのように機能していたか、Compose に加えられた変更、新しい LineHeightStyle API の詳細については、Compose テキストにおけるフォントのパディングの修正に関するブログ投稿をご覧ください。

改行を挿入する

LineBreak API は、テキストを複数の行に分割する基準を定義します。Text コンポーザブルの TextStyle ブロックで、必要な改行の種類を指定できます。プリセットの改行タイプには、次のものがあります。

Simple - 高速で基本的な改行。テキスト入力フィールドにおすすめです。
Heading - 緩い改行ルールを使用した改行。タイトルなどの短いテキストにおすすめです。
Paragraph - 読みやすさを向上させるために、低速で高品質な改行を行います。段落など、テキスト量が多い場合におすすめです。

次のスニペットでは、Simple と Paragraph の両方を使用して、長いテキストブロックでの改行動作を指定しています。

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)TextSnippets.kt

単純な改行戦略を示すテキストブロックと、段落に最適化された改行戦略を示すテキストブロック。シンプルな改行戦略を使用したテキストブロックでは、行の長さのばらつきが大きくなります。 — **図 1.** 単純な改行戦略を使用したテキストブロック（上）と、段落に最適化された改行を使用したテキストブロック（下）。

上記の出力では、Paragraph の改行動作により、Simple の改行よりもビジュアルバランスの取れた結果が得られていることがわかります。

改行をカスタマイズする

Strategy パラメータを使用して、独自の LineBreak 構成を作成することもできます。Strategy には次のいずれかを指定できます。

Balanced - テキストの行の長さを均等にしようとします。また、自動ハイフネーションが有効になっている場合は、自動ハイフネーションも適用されます。スマートウォッチなどの小さな画面で、表示されるテキスト量を最大化する場合におすすめです。
HighQuality - 段落を最適化して、テキストの読みやすさを向上させます。ハイフネーションが有効になっている場合は、ハイフネーションも含まれます。（Balanced または Simple 以外のすべてのデフォルトにする必要があります）。
Simple - 基本的な高速戦略。有効にすると、1 行に収まらない単語に対してのみハイフネーションが実行されます。テキストの編集時に、入力中に位置が変わらないようにするのに便利です。

次のスニペットは、デフォルト設定の段落と、Balanced 改行戦略を使用して小さな画面用に最適化された段落の違いを示しています。

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)TextSnippets.kt

バランスの取れた改行戦略が適用された段落と、戦略なしでフォーマットされた段落。バランスの取れた改行戦略を適用した段落は、デフォルトよりも行の長さが均一になっています。 — **図 2.** `Balanced` 改行戦略でフォーマットされた段落（上）と、改行戦略なしでフォーマットされた段落。

CJK に関する考慮事項

Strictness API と WordBreak API を使用して LineBreak をカスタマイズすることもできます。これらの API は、CJK 言語専用に設計されています。CJK 以外の言語では、これらの API の効果が常に表示されるとは限りません。全体として、改行ルールはロケールに基づいて定義されます。

Strictness は、次のプロパティを使用して改行の厳格さを記述します。

Default - ロケールのデフォルトの改行ルール。Normal または Strict に対応する場合があります。
Loose - 最も制限が緩やかなルール。短い行に適しています。
Normal - 改行の最も一般的なルール。
Strict - 改行に関する最も厳格なルール。

WordBreak は、次のプロパティを使用して、単語内に改行を挿入する方法を定義します。

Default - ロケールのデフォルトの改行ルール。
Phrase - 改行はフレーズに基づきます。

次のスニペットでは、日本語テキストに Strict の厳格さと Phrase の単語区切りの設定を使用しています。

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)TextSnippets.kt

厳格さと改行の設定を適用した日本語テキストとデフォルトのテキストの比較。 — **図 3.** `Strictness` と `WordBreak` の設定で書式設定されたテキスト（上）と、`LineBreak.Heading` のみで書式設定されたテキスト（下）。

行をまたいで分割されたテキストにハイフンを付ける

Hyphens API を使用すると、アプリにハイフネーションのサポートを追加できます。ハイフネーションとは、ダッシュのような句読点を挿入して、単語がテキスト行をまたいで分割されていることを示すことです。有効にすると、適切なハイフネーションポイントで単語の音節間にハイフネーションが追加されます。

デフォルトでは、ハイフネーションは有効になっていません。ハイフネーションを有効にするには、TextStyle ブロックにパラメータとして Hyphens.Auto を追加します。

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)TextSnippets.kt

ハイフネーションが無効になっている段落と、ハイフネーションが有効になっている段落。
ハイフネーションが有効になっている場合、単語はハイフンで区切られ、2 行に分割されます。 — **図 4.** ハイフネーションが無効な段落（上）とハイフネーションが有効な段落（下）。

有効にすると、次の条件でのみハイフネーションが適用されます。

単語が 1 行に収まらない。Simple 改行戦略を使用する場合、単語のハイフネーションは、行が単一の単語よりも短い場合にのみ発生します。
適切なハイフネーションはシステムに存在する辞書を使用して決定されるため、デバイスに適切なロケールが設定されている。

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
テキストのスタイルを設定する
Compose レイアウトの基本
Compose レイアウトの固有の測定値