نمط الفقرة

توضّح هذه الصفحة كيفية إضفاء تنسيق على النص في فقرتك. لضبط النمط على مستوى الفقرة، يمكنك ضبط مَعلمات مثل textAlign وlineHeight أو تحديد ParagraphStyle خاص بك.

ضبط محاذاة النص

تتيح لك المَعلمة textAlign ضبط المحاذاة الأفقية للنص ضمن مساحة سطح Text قابلة للتجميع.

سيختار Text تلقائيًا محاذاة النص الطبيعي استنادًا إلى قيمة المحتوى:

  • الحافة اليسرى لحاوية Text للأبجديات التي تُكتب من اليسار إلى اليمين، مثل اللاتينية أو السيريلية أو الهانغول
  • الحافة اليمنى لحاوية Text للأبجديات التي تُكتب من اليمين إلى اليسار، مثل العربية أو العبرية

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

الكلمات

إذا أردت ضبط محاذاة النص يدويًا في عنصر 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")
            }
        }
    )
}

ثلاث فقرات بثلاثة أنماط مختلفة: الأزرق والأحمر والغامق والأسود العادي

تعديل ارتفاع السطر والمساحة الفارغة

includeFontPadding هي سمة قديمة تضيف مساحة متروكة إضافية استنادًا إلى مقاييس الخط في أعلى السطر الأول وأسفل السطر الأخير من النص. بدءًا من الإصدار 2024.01.01 من Compose BOM، يتم ضبط includeFontPadding على false تلقائيًا، ما يجعل تنسيق النص التلقائي أكثر توافقًا مع أدوات التصميم الشائعة.

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

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

صورة تعرض lineHeight كقياس استنادًا إلى الخطوط فوقها وتحتها مباشرةً
الشكل 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
            )
        )
    )
)

بالإضافة إلى تعديل 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 في نظام عرض الرسائل والتغييرات التي تم إجراؤها على ميزة "إنشاء" وواجهات برمجة التطبيقات الجديدة 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
                )
            )
        }
    )
)

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

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

اعتبارات متعلقة بالحروف الصينية واليابانية والكورية

يمكنك أيضًا تخصيص LineBreak باستخدام واجهة برمجة التطبيقات Strictness وواجهة برمجة التطبيقات WordBreak المصمَّمة خصيصًا لـ 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
    )
)

نص ياباني مع إعدادات Strictness و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
                )
            )
        }
    )
)

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

عند تفعيل ميزة تقسيم الكلمات، لا تحدث إلا في الحالات التالية:

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