Gaya paragraf

Halaman ini menjelaskan cara menata gaya teks untuk paragraf Anda. Untuk menetapkan gaya tingkat paragraf, Anda dapat mengonfigurasi parameter seperti textAlign dan lineHeight atau menentukan ParagraphStyle Anda sendiri.

Menetapkan perataan teks

Parameter textAlign memungkinkan Anda menetapkan perataan horizontal teks dalam area permukaan composable Text.

Secara default, Text akan memilih perataan teks alami, tergantung nilai kontennya:

• Tepi kiri penampung Text untuk alfabet kiri ke kanan seperti Latin, Cyrillic (Sirilik), atau Hangul
• Tepi kanan penampung Text untuk alfabet kanan ke kiri seperti bahasa Arab atau Ibrani

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

Jika Anda ingin menetapkan perataan teks untuk composable Text secara manual, lebih baik gunakan TextAlign.Start dan TextAlign.End bukan TextAlign.Left dan TextAlign.Right karena penyelesaian ke tepi kanan composable Text bergantung pada orientasi teks bahasa yang dipilih. Misalnya, TextAlign.End meratakan ke sisi kanan untuk teks bahasa Prancis dan ke sisi kiri untuk teks bahasa Arab, tetapi TextAlign.Right akan meratakan ke sisi kanan, alfabet mana pun yang digunakan.

Menambahkan beberapa gaya dalam paragraf

Untuk menambahkan beberapa gaya dalam paragraf, Anda dapat menggunakan ParagraphStyle dalam AnnotatedString, yang dapat dianotasi dengan gaya anotasi arbitrer. Setelah sebagian teks Anda ditandai dengan ParagraphStyle, bagian tersebut akan dipisahkan dari bagian lainnya seolah-olah memiliki feed baris di awal dan akhir.

Untuk mengetahui informasi selengkapnya tentang cara menambahkan beberapa gaya dalam teks, lihat Menambahkan beberapa gaya dalam teks.

AnnotatedString memiliki builder yang aman agar lebih mudah dibuat: buildAnnotatedString. Cuplikan berikut menggunakan buildAnnotatedString untuk menetapkan 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

Menyesuaikan tinggi baris dan padding

includeFontPadding adalah properti lama yang menambahkan padding tambahan berdasarkan metrik font di bagian atas baris pertama dan bagian bawah baris terakhir teks. Mulai dari versi Compose BOM 2024.01.01, includeFontPadding ditetapkan ke false secara default, yang membuat tata letak teks default lebih selaras dengan alat desain umum.

Kemampuan untuk mengonfigurasi lineHeight bukanlah hal yang baru, melainkan telah tersedia sejak Android Q. Anda dapat mengonfigurasi lineHeight untuk Text menggunakan parameter lineHeight, yang mendistribusikan tinggi baris di setiap baris teks. Anda kemudian dapat menggunakan LineHeightStyle API baru untuk mengonfigurasi lebih lanjut perataan teks ini dalam ruang, dan menghapus spasi kosong.

Anda mungkin ingin menyesuaikan lineHeight menggunakan unit teks "em" (ukuran font relatif) bukan "sp" (piksel yang diskalakan) untuk presisi yang lebih baik. Untuk mengetahui informasi selengkapnya tentang cara memilih unit teks yang sesuai, lihat TextUnit.

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

Selain menyesuaikan lineHeight, Anda kini dapat memusatkan dan menata gaya teks lebih lanjut menggunakan konfigurasi dengan LineHeightStyle API: LineHeightStyle.Alignment dan LineHeightStyle.Trim (includeFontPadding harus disetel ke false agar Trim berfungsi). Alignment dan Trim menggunakan spasi terukur di antara baris teks untuk mendistribusikannya dengan lebih tepat ke semua baris–termasuk satu baris teks dan baris atas blok teks.

LineHeightStyle.Alignment menentukan cara perataan garis pada ruang yang diberikan oleh tinggi baris. Dalam setiap baris, Anda dapat meratakan teks ke bagian atas, bawah, tengah, atau secara proporsional. LineHeightStyle.Trim kemudian memungkinkan Anda meninggalkan atau menghapus ruang tambahan di bagian atas baris pertama dan bawah baris terakhir teks Anda, yang dihasilkan dari penyesuaian lineHeight dan Alignment. Contoh berikut menunjukkan tampilan teks multibaris dengan berbagai konfigurasi LineHeightStyle.Trim saat perataan dipusatkan (LineHeightStyle.Alignment.Center).

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

Lihat postingan blog Memperbaiki Padding Font di Teks Compose untuk mempelajari lebih lanjut konteks perubahan ini, cara kerja includeFontPadding dalam sistem View , perubahan yang dibuat untuk Compose, dan LineHeightStyle API baru.

Menyisipkan jeda baris

LineBreak API menentukan kriteria teks yang dibagi di beberapa baris. Anda dapat menentukan jenis pemisahan baris yang diinginkan di TextStyle blok composable Text. Jenis pemisahan baris yang telah ditetapkan mencakup hal berikut:

• Simple — Pemisahan baris dasar yang cepat. Direkomendasikan untuk kolom input teks.
• Heading — Pemisahan baris dengan aturan pemisahan yang lebih longgar. Direkomendasikan untuk teks singkat, seperti judul.
• Paragraph — Pemisahan baris yang lebih lambat dan berkualitas tinggi untuk meningkatkan keterbacaan. Direkomendasikan untuk teks dalam jumlah yang lebih besar, seperti paragraf.

Cuplikan berikut menggunakan Simple dan Paragraph untuk menentukan perilaku pemisahan baris pada blok teks yang panjang:

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

Pada output di atas, perhatikan bahwa perilaku pemisahan baris Paragraph menghasilkan hasil yang lebih seimbang secara visual daripada pemisahan baris Simple.

Menyesuaikan jeda baris

Anda juga dapat membuat konfigurasi LineBreak Anda sendiri dengan parameter Strategy. Strategy dapat berupa salah satu hal berikut:

• Balanced — Berupaya menyeimbangkan panjang baris teks, juga menerapkan tanda hubung otomatis jika diaktifkan. Direkomendasikan untuk layar kecil, seperti jam tangan, guna memaksimalkan jumlah teks yang ditampilkan.
• HighQuality — Mengoptimalkan paragraf untuk teks yang lebih mudah dibaca, termasuk tanda hubung jika diaktifkan. (Harus menjadi default untuk semua hal yang bukan Balanced atau Simple.)
• Simple — Strategi dasar yang cepat. Jika diaktifkan, tanda hubung hanya dilakukan untuk kata-kata yang tidak muat dalam satu baris. Berguna untuk mengedit teks agar tidak mengubah posisi saat mengetik.

Cuplikan berikut menunjukkan perbedaan antara paragraf dengan setelan default dan paragraf yang dioptimalkan untuk layar kecil dengan strategi pemisahan baris 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

Pertimbangan CJK

Anda juga dapat menyesuaikan LineBreak dengan Strictness dan WordBreak API, yang dirancang khusus untuk bahasa CJK. Anda mungkin tidak selalu melihat efek API ini dalam bahasa non-CJK. Secara keseluruhan, aturan pemisahan baris ditentukan berdasarkan lokalitas.

Strictness menjelaskan ketatnya pemisahan baris dengan properti berikut:

• Default — Aturan pemisahan default untuk lokalitas. Mungkin sesuai dengan Normal atau Strict.
• Loose — Aturan yang paling longgar. Cocok untuk baris pendek.
• Normal — Aturan pemisahan baris yang paling umum.
• Strict — Aturan pemisahan baris yang paling ketat.

WordBreak menentukan cara penyisipan jeda baris dalam kata dengan properti berikut:

• Default — Aturan pemisahan default untuk lokalitas.
• Phrase — Pemisahan baris didasarkan pada frasa.

Cuplikan berikut menggunakan ketatnya Strict dan setelan pemisahan kata Phrase untuk teks bahasa Jepang:

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

Menambahkan tanda hubung pada teks yang dibagi di beberapa baris

Hyphens API memungkinkan Anda menambahkan dukungan tanda hubung ke aplikasi Anda. Tanda hubung mengacu pada penyisipan tanda baca seperti tanda hubung untuk menunjukkan bahwa sebuah kata dibagi di beberapa baris teks. Jika diaktifkan, tanda hubung akan ditambahkan di antara suku kata pada titik tanda hubung yang sesuai.

Secara default, tanda hubung tidak diaktifkan. Untuk mengaktifkan tanda hubung, tambahkan Hyphens.Auto sebagai parameter di blok TextStyle:

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

Jika diaktifkan, tanda hubung hanya akan terjadi dalam kondisi berikut:

• Kata tidak muat dalam satu baris. Jika Anda menggunakan strategi pemisahan baris Simple, tanda hubung kata hanya akan terjadi jika baris lebih pendek dari satu kata.
• Lokalitas yang sesuai ditetapkan di perangkat Anda, karena tanda hubung yang sesuai ditentukan menggunakan kamus yang ada di sistem.