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

इस पेज में बताया गया है कि अपने . पैराग्राफ़-लेवल स्टाइलिंग को सेट करने के लिए, पैरामीटर कॉन्फ़िगर किए जा सकते हैं, जैसे कि 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.Start और TextAlign.End का इस्तेमाल कर रहा है और TextAlign.Right का इस्तेमाल किया जाता है, क्योंकि वे 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 एक लेगसी प्रॉपर्टी है, जो टेक्स्ट की पहली लाइन के ऊपर और आखिरी लाइन के सबसे नीचे मौजूद फ़ॉन्ट मेट्रिक. कंपोज़ बीओएम वर्शन 2024.01.01 से शुरू करते हुए, includeFontPadding सेट हो गया है डिफ़ॉल्ट रूप से false पर सेट करता है, जो डिफ़ॉल्ट टेक्स्ट लेआउट को सामान्य डिज़ाइन टूल.

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

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

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

के साथ इस्तेमाल किया जाता है

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

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

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

{% endverba नया %}

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
• टेक्स्ट की स्टाइल करना
• लेआउट की बुनियादी बातें लिखना
• Compose के लेआउट में इंट्रिंसिक मेज़रमेंट

{% verbatim %}