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

इस पेज पर बताया गया है कि पैराग्राफ़ के लिए टेक्स्ट को स्टाइल कैसे दिया जा सकता है. पैराग्राफ़-लेवल की स्टाइल सेट करने के लिए, 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 BOM के वर्शन 2024.01.01 से, includeFontPadding डिफ़ॉल्ट रूप से false पर सेट होता है. इससे डिफ़ॉल्ट टेक्स्ट लेआउट, सामान्य डिज़ाइन टूल के लेआउट से ज़्यादा मिलता-जुलता हो जाता है.

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

ज़्यादा सटीक जानकारी के लिए, “sp” (स्केल किए गए पिक्सल) के बजाय टेक्स्ट यूनिट “em” (रिलेटिव फ़ॉन्ट साइज़) का इस्तेमाल करके, lineHeight में बदलाव किया जा सकता है. सही टेक्स्ट यूनिट चुनने के बारे में ज़्यादा जानकारी के लिए, TextUnit देखें.

इस इमेज में, लाइन की ऊंचाई को मेज़रमेंट के तौर पर दिखाया गया है. यह मेज़रमेंट, सीधे ऊपर और नीचे मौजूद लाइनों के आधार पर किया गया है.
पहली इमेज. अलाइनमेंट और ट्रिम का इस्तेमाल करके, टेक्स्ट को सेट में अडजस्ट करें lineHeight. साथ ही, ज़रूरत पड़ने पर अतिरिक्त स्पेस को ट्रिम करें.

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.None LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop को दिखाने वाली इमेज LineHeightStyle.Trim.LastLineBottom को दिखाने वाली इमेज
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

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

लाइन ब्रेक करने की सही रणनीति वाला पैराग्राफ़ और बिना रणनीति के फ़ॉर्मैट किया गया पैराग्राफ़. लाइन के बीच के अंतर को संतुलित रखने की रणनीति वाले पैराग्राफ़ में, डिफ़ॉल्ट पैराग्राफ़ की तुलना में लाइन की लंबाई ज़्यादा एक जैसी होती है.
दूसरी इमेज. Balanced लाइन-ब्रेक करने की रणनीति (ऊपर) के साथ फ़ॉर्मैट किया गया पैराग्राफ़ बनाम लाइन-ब्रेक करने की रणनीति के बिना फ़ॉर्मैट किया गया पैराग्राफ़.

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

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

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

'ज़्यादा सटीक' और 'वर्डब्रेक' सेटिंग के साथ जैपनीज़ टेक्स्ट बनाम डिफ़ॉल्ट टेक्स्ट.
तीसरी इमेज. Strictness और WordBreak सेटिंग (ऊपर) के साथ फ़ॉर्मैट किया गया टेक्स्ट बनाम सिर्फ़ LineBreak.Heading (नीचे) के साथ फ़ॉर्मैट किया गया टेक्स्ट.

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

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

डिफ़ॉल्ट रूप से, हाइफ़न लगाने की सुविधा चालू नहीं होती. हाइफ़न जोड़ने की सुविधा चालू करने के लिए, 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 लाइन ब्रेक करने की रणनीति का इस्तेमाल किया जाता है, तो किसी शब्द को हाइफ़न करने की सुविधा सिर्फ़ तब मिलती है, जब लाइन किसी एक शब्द से छोटी हो.
  • आपके डिवाइस पर सही स्थानीय भाषा सेट होती है, क्योंकि सही हाइफ़नेशन तय करने के लिए, सिस्टम में मौजूद डिक्शनरी का इस्तेमाल किया जाता है.