نمط الفقرة

تصف هذه الصفحة كيف يمكنك تصميم نص للفقرة. لضبط نمط على مستوى الفقرة، يمكنك ضبط معلَمات مثل 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.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 هي سمة قديمة تضيف مساحة متروكة إضافية استنادًا إلى مقاييس الخط في أعلى السطر الأول وأسفل السطر الأخير من النص. بدءًا من الإصدار 2024.01.01 من Compose BOM، تم ضبط includeFontPadding على false تلقائيًا، ما يجعل تنسيق النص التلقائي أكثر توافقًا مع أدوات التصميم الشائعة.

إنّ إمكانية ضبط lineHeight ليست جديدة، فهي متاحة منذ Android Q. يمكنك ضبط lineHeight للسمة Text باستخدام المَعلمة lineHeight التي توزّع ارتفاع السطر في كل سطر من النص. يمكنك بعد ذلك استخدام LineHeightStyle API الجديدة لضبط كيفية محاذاة هذا النص داخل المساحة وإزالة المسافة البيضاء.

ننصحك بتعديل lineHeight باستخدام وحدة النص "em" (حجم الخط النسبي) بدلاً من "sp" (وحدات بكسل مُقسَّمة) لتحسين الدقة. ولمزيد من المعلومات حول اختيار وحدة نصية مناسبة، يُرجى الاطّلاع على TextUnit.

صورة توضح ارتفاع الخط كقياس استنادًا إلى الخطوط فوقه وأسفله مباشرةً.
الشكل 1. يمكنك استخدام المحاذاة والقطع لضبط النص داخل المجموعة 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
            )
        )
    )
)
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.None LineHeightStyle.Trim.Both
صورة توضِّح ميزة LineHeightStyle.Trim.FirstLineTop صورة توضّح LineHeightStyle.Trim.LastLineBottom
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

يمكنك الاطّلاع على مشاركة المدونة إصلاح مساحة الخطوط في إنشاء النص لمعرفة المزيد من المعلومات حول سياق هذا التغيير وطريقة عمل includeFontPadding في نظام العرض والتغييرات التي تم إجراؤها في Compose وواجهات برمجة التطبيقات LineHeightStyle الجديدة.

إدراج فواصل أسطر

تحدّد واجهة برمجة التطبيقات LineBreak المعايير التي يتم من خلالها تقسيم النص على عدة أسطر. يمكنك تحديد نوع فاصل الأسطر الذي تريده في كتلة 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

عبارة عن جزء نصي يعرض استراتيجية بسيطة لتقسيم الأسطر مقابل مجموعة نصية مع استراتيجية تقسيم للفقرات محسّنة. يكون الكتلة النصية ذات الإستراتيجية البسيطة لتقسيم الأسطر أكثر تباينًا في أطوال الأسطر.
الشكل 1. تمثّل هذه السمة مجموعة نصية مع استراتيجية بسيطة لفواصل الأسطر (في الأعلى) مقابل مربّع نصّي مع فاصل أسطر محسّن للفقرات (أسفل).

في الناتج أعلاه، يُرجى ملاحظة أنّ سلوك فاصل الأسطر 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

فقرة ذات استراتيجية متوازنة لتقسيم الأسطر وفقرة منسَّقة بدون استراتيجية. تكون أطوال أسطر أكثر اتساقًا للفقرة التي تستخدم استراتيجية فاصل الأسطر المتوازنة أكثر اتّساقًا من الاستراتيجية التلقائية.
الشكل 2. فقرة منسَّقة باستخدام استراتيجية Balanced لتقسيم الأسطر، (في الأعلى) مقابل فقرة منسَّقة بدون وضع استراتيجية لفصل الأسطر.

اعتبارات 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

نص باللغة اليابانية تم ضبط إعدادات مستوى التشدّد وWordBreak مقارنةً بالنص التلقائي.
الشكل 3. نص تم تنسيقه باستخدام إعدادات Strictness وWordBreak (في الأعلى) مقابل النص الذي تم تنسيقه فقط باستخدام LineBreak.Heading (في الأسفل).

واصلة النص مقسمة على الأسطر

تتيح لك واجهة برمجة التطبيقات 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

تم تفعيل فقرة بدون واصلة وفقرة تم تفعيل الواصلة فيها. عند تفعيل الواصلة، يتم واصل الكلمة وتقسيمها إلى سطرين.
الشكل 4. للفقرة التي تم تفعيل الواصلة فيها (في الأعلى)، والفقرة التي تم تفعيل الواصلة فيها (في الأسفل)،

عند تفعيل هذا الإعداد، لا تحدث الواصلة إلا في الحالات التالية:

  • لا تتناسب الكلمة مع الخط. في حال كنت تستخدم استراتيجية تقسيم الأسطر Simple، لا يتم تطبيق واصلة الكلمة إلا إذا كان السطر أقصر من الكلمة المفردة.
  • ويتم ضبط اللغة المناسبة على جهازك، حيث يتم تحديد الواصلة المناسبة باستخدام القواميس المتوفّرة على النظام.