سبک پاراگراف

این صفحه توضیح می‌دهد که چگونه می‌توانید نوشتار را برای بند خود سبک‌بندی کنید. برای تنظیم سبک سطح پاراگراف، می‌توانید پارامترهایی مثل 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 صرف‌نظر از اینکه از چه الفبایی استفاده می‌شود در سمت راست تراز می‌شود.

افزودن چندین سبک در یک پاراگراف

برای افزودن چند سبک در یک پاراگراف، می‌توانید از 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 یک دارایی قدیمی است که براساس سنجه‌های قلم در بالای خط اول و پایین خط آخر نوشتار، حاشیه اضافی اضافه می‌کند. از نسخه 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، اکنون می‌توانید بااستفاده از پیکربندی‌های LineHeightStyle API، نوشتار را بیشتر در مرکز قرار دهید و سبک آن را تغییر دهید: 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 در سیستم View، و تغییرات ایجادشده برای Compose و میاناهای برنامه‌سازی کاربردی جدید LineHeightStyle، پست وبلاگ رفع حاشیه قلم در نوشتار 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

ملاحظات CJK

همچنین می‌توانید LineBreak را با Strictness و WordBreak «میاناهای برنامه‌سازی کاربردی» سفارشی‌سازی کنید، که به‌طور ویژه برای زبان‌های CJK طراحی شده‌اند. ممکن است همیشه تأثیر این میاناهای برنامه‌سازی کاربردی را در زبان‌های غیر 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 به شما امکان می‌دهد از خط فاصله‌گذاری در برنامه‌تان پشتیبانی کنید. خط فاصله‌گذاری به درج علامت نگارشی خط تیره مانند برای نشان دادن اینکه کلمه‌ای در خطوط نوشتار تقسیم شده است اشاره دارد. وقتی فعال باشد، خط فاصله بین هجاهای کلمه در نقاط مناسب خط فاصله اضافه می‌شود.

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