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

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

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

किसी पैराग्राफ़ में एक से ज़्यादा स्टाइल जोड़ने के लिए, ParagraphStyle में AnnotatedString का इस्तेमाल किया जा सकता है. इस पर, आर्बिट्ररी एनोटेशन की स्टाइल से एनोटेट किया जा सकता है. टेक्स्ट के किसी हिस्से को 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 BOM के 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 API के साथ कॉन्फ़िगरेशन का इस्तेमाल करके, टेक्स्ट को सेंटर में लाया जा सकता है और उसे स्टाइल किया जा सकता है. इसके लिए, 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

इस बदलाव के कॉन्टेक्स्ट, View सिस्टम में includeFontPadding के काम करने के तरीके, Compose और नए LineHeightStyle एपीआई के लिए किए गए बदलावों के बारे में ज़्यादा जानने के लिए, Compose टेक्स्ट में फ़ॉन्ट पैडिंग ठीक करना ब्लॉग पोस्ट पढ़ें.

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

LineBreak API, उन शर्तों को तय करता है जिनके आधार पर टेक्स्ट को एक से ज़्यादा लाइनों में बांटा जाता है. TextStyle ब्लॉक में, Text कंपोज़ेबल में, लाइन ब्रेक करने का टाइप तय किया जा सकता है. लाइन ब्रेक करने के पहले से तय टाइप में ये शामिल हैं:

• 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

सीजेके भाषाओं से जुड़ी ज़रूरी बातें

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

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 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

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

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