سبک پاراگراف

این صفحه توضیح می‌دهد که چگونه می‌توانید متن را برای پاراگراف خود سبک‌بندی کنید. برای تنظیم سبک در سطح پاراگراف، می‌توانید پارامترهایی مثل textAlign و lineHeight را پیکربندی کنید یا ParagraphStyle خودتان را تعریف کنید.

تنظیم تراز نوشتار

پارامتر textAlign به شما امکان می‌دهد تراز افقی نوشتار را در مساحت سطح قابل‌ترکیب Text تنظیم کنید.

به‌طور پیش‌فرض، Text تراز نوشتار طبیعی را بسته به مقدار محتوای آن انتخاب می‌کند:

  • لبه چپ محفظه Text برای الفباهای چپ به راست مانند لاتین، سیریلیک، یا هانگول
  • لبه راست محفظه Text برای الفباهای راست‌به‌چپ مانند عربی یا عبری

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

کلمات

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

امکان پیکربندی lineHeight جدید نیست و از Android Q دردسترس بوده است. می‌توانید lineHeight را برای Text بااستفاده از پارامتر lineHeight پیکربندی کنید، که ارتفاع خط را در هر خط نوشتار توزیع می‌کند. سپس می‌توانید از LineHeightStyle API جدید برای پیکربندی بیشتر نحوه تراز شدن این نوشتار در فضا و برداشتن فضای خالی استفاده کنید.

برای دقت بیشتر، شاید بخواهید lineHeight را بااستفاده از واحد نوشتاری «em» (اندازه قلم نسبی) به‌جای «sp» (پیکسل‌های مقیاس‌بندی‌شده) تنظیم کنید. برای اطلاعات بیشتر درباره انتخاب واحد نوشتاری مناسب، TextUnit را ببینید.

تصویری که lineHeight را به‌عنوان اندازه‌گیری براساس خطوط مستقیماً بالا و پایین آن نشان می‌دهد.
شکل ۱. از «تراز کردن» و «برش دادن» برای تنظیم کردن متن در مجموعه 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 API: LineHeightStyle.Alignment و LineHeightStyle.Trim (includeFontPadding باید روی false تنظیم شود تا Trim کار کند) متن را بیشتر در مرکز قرار دهید و به آن سبک دهید. «تراز کردن» و «برش دادن» از فضای اندازه‌گیری‌شده بین خطوط نوشتار استفاده می‌کنند تا آن را به‌طور مناسب‌تری در همه خطوط توزیع کنند – ازجمله یک خط نوشتار و خط بالایی یک بلوک نوشتار.

LineHeightStyle.Alignment نحوه تراز کردن خط را در فضای ارائه‌شده توسط ارتفاع خط تعریف می‌کند. در هر خط، می‌توانید نوشتار را در بالا، پایین، مرکز، یا به‌صورت تناسبی تراز کنید. LineHeightStyle.Trim سپس به شما امکان می‌دهد فضای اضافی را در بالای خط اول و پایین آخرین خط نوشتارتان که از هرگونه تنظیمات lineHeight و «تراز» ایجاد شده است باقی بگذارید یا بردارید. نمونه‌های زیر نشان می‌دهد که نوشتار چندخطی با پیکربندی‌های مختلف LineHeightStyle.Trim وقتی تراز وسط باشد (LineHeightStyle.Alignment.Center) چگونه به‌نظر می‌رسد.

تصویری که LineHeightStyle.Trim.None را نشان می‌دهد تصویری که LineHeightStyle.Trim.Both را نشان می‌دهد
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
تصویری که LineHeightStyle.Trim.FirstLineTop را نشان می‌دهد تصویری که LineHeightStyle.Trim.LastLineBottom را نشان می‌دهد
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

برای کسب اطلاعات بیشتر درباره زمینه این تغییر، نحوه عملکرد includeFontPadding در سیستم «نما»، و تغییرات ایجادشده برای Compose و میاناهای برنامه‌سازی کاربردی جدید LineHeightStyle، پست وبلاگ Fixing Font Padding in Compose Text (رفع مشکل حاشیه قلم در نوشتار Compose) را ببینید.

درج شکست خط

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

  • 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

پاراگرافی با استراتژی شکستن خط متعادل و پاراگرافی که بدون استراتژی قالب‌بندی شده است. پاراگراف با راهبرد شکستن خط متوازن
  طول خطوط یکنواخت‌تری نسبت‌به حالت پیش‌فرض دارد.
شکل ۲. پاراگرافی که با استراتژی شکستن خط 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 = customTitleLineBrenippets.kt

نوشتار ژاپنی با تنظیمات «سخت‌گیری» و «شکستن کلمه» درمقابل نوشتار پیش‌فرض.
شکل ۳.‏ نوشتار قالب‌بندی‌شده با تنظیمات Strictness و WordBreak (بالا) درمقابل نوشتار قالب‌بندی‌شده فقط با LineBreak.Heading (پایین).

خط تیره گذاشتن برای نوشتاری که در خطوط مختلف تقسیم شده است

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