پاراگراف سبک

این صفحه نحوه استایل دادن به متن را برای پاراگراف خود توضیح می دهد. برای تنظیم استایل در سطح پاراگراف، می‌توانید پارامترهایی مانند 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 composable را تنظیم کنید، ترجیح می‌دهید به‌ترتیب از TextAlign.Start و TextAlign.End به جای TextAlign.Left و TextAlign.Right استفاده کنید، زیرا بسته به زبان ترجیحی در لبه سمت راست Text قابل نوشتن قرار می‌گیرند. جهت گیری متن به عنوان مثال، TextAlign.End برای متن فرانسوی به سمت راست و برای متن عربی به سمت چپ تراز می‌کند، اما TextAlign.Right بدون توجه به الفبای مورد استفاده، در سمت راست تراز می‌کند.

چند سبک در یک پاراگراف اضافه کنید

برای افزودن چند سبک به یک پاراگراف، می‌توانید از ParagraphStyle در AnnotatedString استفاده کنید، که می‌تواند با سبک‌های حاشیه‌نویسی دلخواه حاشیه‌نویسی شود. هنگامی که بخشی از متن شما با یک ParagraphStyle علامت گذاری می شود، آن قسمت از متن باقی مانده جدا می شود، گویی در ابتدا و انتهای آن دارای فیدهای خطی است.

برای اطلاعات بیشتر در مورد افزودن چند سبک در یک متن، به افزودن چند سبک در متن مراجعه کنید.

AnnotatedString دارای سازنده ایمن برای ایجاد آسان تر است: buildAnnotatedString . قطعه زیر از buildAnnotatedString برای تنظیم ParagraphStyle استفاده می کند:

@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 یک ویژگی قدیمی است که بر اساس معیارهای فونت در بالای خط اول و پایین آخرین خط یک متن padding اضافه می کند. با شروع از Compose BOM نسخه 2024.01.01 ، includeFontPadding به طور پیش‌فرض روی false تنظیم شده است، که طرح‌بندی متن پیش‌فرض را با ابزارهای طراحی رایج مطابقت می‌دهد.

قابلیت پیکربندی lineHeight جدید نیست – از Android Q در دسترس بوده است. می‌توانید lineHeight برای Text با استفاده از پارامتر 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 ، اکنون می‌توانید با استفاده از پیکربندی‌های API آزمایشی LineHeightStyle : LineHeightStyle.Alignment و LineHeightStyle.Trim ، متن را در مرکز و استایل بیشتر قرار دهید (برای اینکه 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 در سیستم View، و تغییرات ایجاد شده برای Compose و APIهای جدید LineHeightStyle ، پست وبلاگ رفع فونت را در Compose Text ببینید.

درج شکستگی های خط

LineBreak API معیارهایی را تعریف می کند که براساس آن متن در چندین خط تقسیم می شود. شما می توانید نوع شکستن خط مورد نظر خود را در بلوک TextStyle Text composable خود مشخص کنید. انواع شکست خط از پیش تعیین شده شامل موارد زیر است:

• 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 نتیجه بصری متعادل تری ایجاد می کند.

سفارشی کردن خطوط شکست

شما همچنین می توانید پیکربندی LineBreak خود را با پارامتر Strategy بسازید. 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 API که مخصوص زبان‌های CJK طراحی شده‌اند، سفارشی کنید. ممکن است همیشه اثرات این API ها را در زبان های غیر 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

تقسیم متن در خطوط

Hyphens API به شما امکان می دهد پشتیبانی از خط فاصله را به برنامه خود اضافه کنید. خط فاصله به درج یک علامت نقطه گذاری مانند خط تیره اشاره دارد تا نشان دهد که یک کلمه در بین خطوط متن تقسیم شده است. هنگامی که فعال است، خط فاصله بین هجاهای یک کلمه در نقاط خط خطی مناسب اضافه می شود.

به طور پیش فرض، خط فاصله فعال نیست. برای فعال کردن خط فاصله، Hyphens.Auto را به عنوان یک پارامتر در بلوک TextStyle اضافه کنید:

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 برای شکستن خط استفاده می کنید، خط فاصله یک کلمه تنها در صورتی اتفاق می افتد که یک خط کوتاهتر از کلمه واحد باشد.
• محلی مناسب بر روی دستگاه شما تنظیم شده است، زیرا خط فاصله مناسب با استفاده از فرهنگ لغت موجود در سیستم تعیین می شود.

{% کلمه به کلمه %} {% آخر کلمه %}

توصیه شده برای شما

• توجه: متن پیوند زمانی که جاوا اسکریپت خاموش است نمایش داده می شود
• متن سبک
• اصول چیدمان را بنویسید
• اندازه‌گیری‌های ذاتی در طرح‌بندی‌های Compose

{% کلمه به کلمه %} {% آخر کلمه %}