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

इस पेज पर बताया गया है कि अपने . पैराग्राफ़-लेवल स्टाइलिंग को सेट करने के लिए, पैरामीटर कॉन्फ़िगर किए जा सकते हैं, जैसे कि textAlign और lineHeight या अपना ParagraphStyle बताएं.

टेक्स्ट अलाइनमेंट सेट करें

textAlign पैरामीटर की मदद से, हॉरिज़ॉन्टल इसका अलाइनमेंट Text कंपोज़ेबल सरफ़ेस एरिया में मौजूद टेक्स्ट.

डिफ़ॉल्ट रूप से, Text टेक्स्ट की स्टाइल के हिसाब से, नैचुरल टेक्स्ट अलाइनमेंट चुनेगा कॉन्टेंट की वैल्यू:

  • जैसे, बाएं से दाएं के अक्षरों के लिए Text कंटेनर का बायां किनारे लैटिन, सिरिलिक या हंगुल
  • जैसे, दाएं-से-बाएं अक्षरों के लिए Text कंटेनर का दायां किनारा ऐरेबिक या हिब्रू

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}

शब्द

अगर आपको किसी 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")
            }
        }
    )
}

तीन अलग-अलग स्टाइल के पैराग्राफ़: नीला, लाल, और बोल्ड, और सादा काला

लाइन की ऊंचाई और पैडिंग (जगह) अडजस्ट करें

includeFontPadding एक लेगसी प्रॉपर्टी है, जो टेक्स्ट की पहली लाइन के ऊपर और आखिरी लाइन के सबसे नीचे मौजूद फ़ॉन्ट मेट्रिक. कंपोज़ बीओएम वर्शन 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
            )
        )
    )
)

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

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

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

टेक्स्ट की तुलना में आसानी से लाइन ब्रेक करने की रणनीति दिखाने वाला टेक्स्ट ब्लॉक
  ब्लॉक करने के लिए, पैराग्राफ़ के ऑप्टिमाइज़ की गई ब्रेकिंग रणनीति का इस्तेमाल करें. आसान टेक्स्ट वाला टेक्स्ट ब्लॉक
लाइन ब्रेक करने की रणनीति में, लाइन की लंबाई में ज़्यादा फ़र्क़ होता है.
पहली इमेज. लाइन ब्रेकिंग की आसान रणनीति (टॉप) बनाम टेक्स्ट ब्लॉक पैराग्राफ़ के लिए ऑप्टिमाइज़ की गई लाइन ब्रेकिंग वाला टेक्स्ट ब्लॉक (सबसे नीचे).

ऊपर दिए गए आउटपुट में ध्यान दें कि 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
            )
        }
    )
)

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

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

डिफ़ॉल्ट टेक्स्ट की तुलना में, सख्ती और WordBreak की सेटिंग वाला जैपनीज़ टेक्स्ट.
तीसरी इमेज. 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
                )
            )
        }
    )
)

एक पैराग्राफ़ जिसमें हाइफ़न डालने की सुविधा चालू हो और एक पैराग्राफ़ में हाइफ़न लगाने की सुविधा चालू हो.
  जब हायफ़नेशन चालू होता है, तो शब्द को हाइफ़न लगाकर दो लाइनों में बांटा जाता है.
चौथी इमेज. जिस पैराग्राफ़ में हाइफ़न का इस्तेमाल करने की सुविधा चालू नहीं है (सबसे ऊपर) बनाम ऐसा पैराग्राफ़ हाइफ़नेशन की सुविधा को चालू करें (नीचे).

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

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