शैली पैराग्राफ़

इस पेज पर बताया गया है कि पैराग्राफ़ के टेक्स्ट को कैसे स्टाइल किया जा सकता है. पैराग्राफ़-लेवल की स्टाइलिंग सेट करने के लिए, 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 दाईं ओर अलाइन होता है, भले ही किसी भी वर्णमाला का इस्तेमाल किया गया हो.

किसी पैराग्राफ़ में कई स्टाइल जोड़ना

किसी पैराग्राफ़ में कई स्टाइल जोड़ने के लिए, AnnotatedString में ParagraphStyle का इस्तेमाल किया जा सकता है. इसमें किसी भी एनोटेशन की स्टाइल के साथ एनोटेट किया जा सकता है. टेक्स्ट के किसी हिस्से को ParagraphStyle से मार्क करने के बाद, वह हिस्सा बाकी टेक्स्ट से अलग हो जाता है. ऐसा लगता है कि उसके शुरू और आखिर में लाइन फ़ीड हैं.

टेक्स्ट में कई स्टाइल जोड़ने के बारे में ज़्यादा जानने के लिए, टेक्स्ट में कई स्टाइल जोड़ना लेख पढ़ें.

AnnotatedString में टाइप-सेफ़ बिल्डर मौजूद है, ताकि buildAnnotatedString को आसानी से बनाया जा सके. इस स्निपेट में, ParagraphStyle को सेट करने के लिए buildAnnotatedString का इस्तेमाल किया गया है:

@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

लाइन की ऊंचाई और पैडिंग में बदलाव करना

includeFontPadding एक लेगसी प्रॉपर्टी है. यह टेक्स्ट की पहली लाइन के ऊपर और आखिरी लाइन के नीचे, फ़ॉन्ट मेट्रिक के आधार पर अतिरिक्त पैडिंग जोड़ती है. Compose बीओएम वर्शन 2024.01.01 से, includeFontPadding को डिफ़ॉल्ट रूप से false पर सेट किया गया है. इससे डिफ़ॉल्ट टेक्स्ट लेआउट, डिज़ाइन के लिए इस्तेमाल होने वाले सामान्य टूल के साथ बेहतर तरीके से काम करता है.

lineHeight को कॉन्फ़िगर करने की सुविधा नई नहीं है. यह Android Q के बाद से उपलब्ध है. lineHeight पैरामीटर का इस्तेमाल करके, Text के लिए lineHeight को कॉन्फ़िगर किया जा सकता है. यह पैरामीटर, टेक्स्ट की हर लाइन में लाइन की ऊंचाई को डिस्ट्रिब्यूट करता है. इसके बाद, नए LineHeightStyle API का इस्तेमाल करके, यह कॉन्फ़िगर किया जा सकता है कि इस टेक्स्ट को स्पेस में कैसे अलाइन किया जाए और खाली जगह को कैसे हटाया जाए.

ज़्यादा सटीक नतीजे पाने के लिए, "sp" (स्केल किए गए पिक्सल) के बजाय टेक्स्ट यूनिट "em" (रिलेटिव फ़ॉन्ट साइज़) का इस्तेमाल करके, lineHeight को अडजस्ट किया जा सकता है. टेक्स्ट की सही यूनिट चुनने के बारे में ज़्यादा जानने के लिए, 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

lineHeight में बदलाव करने के साथ-साथ, अब LineHeightStyle एपीआई के कॉन्फ़िगरेशन का इस्तेमाल करके, टेक्स्ट को बीच में अलाइन किया जा सकता है और उसे स्टाइल किया जा सकता है: LineHeightStyle.Alignment और LineHeightStyle.Trim (ट्रिम की सुविधा के काम करने के लिए, includeFontPadding को false पर सेट करना ज़रूरी है). अलाइनमेंट और ट्रिम, टेक्स्ट की लाइनों के बीच की खाली जगह का इस्तेमाल करके, उसे सभी लाइनों में ज़्यादा सही तरीके से बांटते हैं. इसमें टेक्स्ट की एक लाइन और टेक्स्ट के ब्लॉक की सबसे ऊपर वाली लाइन शामिल है.

LineHeightStyle.Alignment से यह तय होता है कि लाइन की ऊंचाई से तय की गई जगह में, लाइन को कैसे अलाइन किया जाए. हर लाइन में, टेक्स्ट को ऊपर, नीचे, बीच में या अनुपात के हिसाब से अलाइन किया जा सकता है. LineHeightStyle.Trim की मदद से, टेक्स्ट की पहली लाइन के ऊपर और आखिरी लाइन के नीचे मौजूद अतिरिक्त स्पेस को हटाया जा सकता है या उसे वैसे ही छोड़ा जा सकता है. यह स्पेस, lineHeight और अलाइनमेंट में बदलाव करने की वजह से जनरेट होता है. यहां दिए गए सैंपल से पता चलता है कि अलाइनमेंट को बीच में सेट करने (LineHeightStyle.Alignment.Center) पर, कई लाइनों वाला टेक्स्ट अलग-अलग LineHeightStyle.Trim कॉन्फ़िगरेशन के साथ कैसा दिखता है.

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

इस बदलाव के बारे में ज़्यादा जानने के लिए, Fixing Font Padding in Compose Text ब्लॉग पोस्ट देखें. इसमें यह भी बताया गया है कि व्यू सिस्टम में includeFontPadding कैसे काम करता था. साथ ही, Compose और नए LineHeightStyle एपीआई के लिए किए गए बदलावों के बारे में भी बताया गया है.

लाइन ब्रेक डालना

LineBreak एपीआई, उन शर्तों के बारे में बताता है जिनके आधार पर टेक्स्ट को कई लाइनों में बांटा जाता है. अपने 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

ऊपर दिए गए आउटपुट में, ध्यान दें कि Paragraph लाइन ब्रेक करने के तरीके से, Simple लाइन ब्रेक करने के तरीके की तुलना में ज़्यादा विज़ुअल बैलेंस वाला नतीजा मिलता है.

लाइन ब्रेक को पसंद के मुताबिक बनाना

Strategy पैरामीटर की मदद से, LineBreak कॉन्फ़िगरेशन को खुद भी बनाया जा सकता है. Strategy इनमें से कोई भी हो सकता है:

• Balanced — टेक्स्ट की लाइनों की लंबाई को बराबर करने की कोशिश करता है. साथ ही, अगर हाइफ़न लगाने की सुविधा चालू है, तो अपने-आप हाइफ़न लगाता है. इसे स्मार्टवॉच जैसी छोटी स्क्रीन के लिए सुझाया जाता है, ताकि ज़्यादा से ज़्यादा टेक्स्ट दिखाया जा सके.
• HighQuality — यह विकल्प, पैराग्राफ़ को ऑप्टिमाइज़ करता है, ताकि टेक्स्ट को आसानी से पढ़ा जा सके. अगर हाइफ़न लगाने की सुविधा चालू है, तो यह विकल्प उसे भी ऑप्टिमाइज़ करता है. (यह उन सभी चीज़ों के लिए डिफ़ॉल्ट होना चाहिए जो Balanced या Simple नहीं हैं.)
• Simple — बुनियादी और तेज़ रणनीति. अगर यह सुविधा चालू है, तो हाइफ़न का इस्तेमाल सिर्फ़ उन शब्दों के लिए किया जाता है जो पूरी लाइन में फ़िट नहीं होते. यह टेक्स्ट में बदलाव करने के लिए उपयोगी है, ताकि टाइप करते समय कर्सर की पोज़िशन न बदले.

यहां दिए गए स्निपेट में, डिफ़ॉल्ट सेटिंग वाले पैराग्राफ़ और छोटी स्क्रीन के लिए ऑप्टिमाइज़ किए गए पैराग्राफ़ के बीच का अंतर दिखाया गया है. इसमें, 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

CJK के लिए ध्यान देने वाली बातें

Strictness और WordBreak एपीआई की मदद से, LineBreak को पसंद के मुताबिक भी बनाया जा सकता है. इन एपीआई को खास तौर पर सीजेके भाषाओं के लिए डिज़ाइन किया गया है. ऐसा हो सकता है कि आपको सीजेके के अलावा अन्य भाषाओं में, इन एपीआई का असर हमेशा न दिखे. कुल मिलाकर, लाइन-ब्रेकिंग के नियम, स्थान के आधार पर तय किए जाते हैं.

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

अलग-अलग लाइनों में बंटे टेक्स्ट को हाइफ़न से जोड़ना

Hyphens एपीआई की मदद से, अपने ऐप्लिकेशन में हाइफ़न लगाने की सुविधा जोड़ी जा सकती है. हाइफ़न लगाने का मतलब है कि डैश जैसा विराम चिह्न डालकर यह बताना कि कोई शब्द, टेक्स्ट की लाइनों में बंटा हुआ है. यह सुविधा चालू होने पर, किसी शब्द के सिलेबल के बीच सही जगहों पर हाइफ़न जोड़ दिया जाता है.

डिफ़ॉल्ट रूप से, हाइफ़नेशन की सुविधा चालू नहीं होती. हाइफ़नेशन की सुविधा चालू करने के लिए, Hyphens.Auto को 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

हाइफ़न लगाने की सुविधा चालू होने पर, यह सिर्फ़ इन स्थितियों में काम करती है:

• कोई शब्द किसी लाइन में फ़िट नहीं बैठता. अगर Simple लाइन ब्रेक करने की रणनीति का इस्तेमाल किया जाता है, तो किसी शब्द को हाइफ़न से सिर्फ़ तब अलग किया जाता है, जब लाइन की लंबाई एक शब्द से कम हो.
• आपके डिवाइस पर सही स्थानीय भाषा सेट हो, क्योंकि सिस्टम पर मौजूद डिक्शनरी का इस्तेमाल करके, सही हाइफ़नेशन तय किया जाता है.