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

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

ध्यान दें: टेक्स्ट अलाइनमेंट, लेआउट अलाइनमेंट से अलग होता है. लेआउट अलाइनमेंट का मतलब, Row या Column जैसे कंटेनर में किसी Composable को पोज़िशन करने से है. ज़्यादा जानकारी के लिए, लेआउट बनाने की बुनियादी बातें लेख पढ़ें.

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

किसी पैराग्राफ़ में कई स्टाइल जोड़ने के लिए, 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 के बाद से Text के लिए lineHeight को कॉन्फ़िगर करने के लिए, इनका इस्तेमाल करें: lineHeight पैरामीटर, जो इसकी हर लाइन में लाइन की ऊंचाई को डिस्ट्रिब्यूट करता है टेक्स्ट. इसके बाद, नए LineHeightStyle API का इस्तेमाल करके, इस टेक्स्ट को स्पेस में अलाइन करने का तरीका कॉन्फ़िगर किया जा सकता है. साथ ही, स्पेस में मौजूद खाली जगह को हटाया जा सकता है.

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

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

चेतावनी: LineHeightStyle एपीआई (ट्रिम) का इस्तेमाल करके किए गए ये बदलाव सिर्फ़ तब काम कर सकते हैं, जब उन्हें कॉन्फ़िगरेशन includeFontPadding = false. के साथ इस्तेमाल किया जाए

जानने के लिए, 'टेक्स्ट लिखें' में फ़ॉन्ट पैडिंग को ठीक करना ब्लॉग पोस्ट देखें इस बदलाव की वजह के बारे में ज़्यादा जानकारी, जैसे कि 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 — बुनियादी और तेज़ रणनीति. इस विकल्प के चालू होने पर, सिर्फ़ उन शब्दों के लिए हाइफ़न का इस्तेमाल किया जाता है जो पूरी लाइन में नहीं आते. टाइप करते समय, कर्सर की जगह बदलने से बचने के लिए, टेक्स्ट में बदलाव करने के लिए फ़ायदेमंद है.

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

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

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

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

Strictness में, लाइन ब्रेक की सख्ती के बारे में बताया गया है. इसके लिए, यहां दिए गए तरीके इस्तेमाल किए गए हैं प्रॉपर्टी:

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