نمط الفقرة

توضّح هذه الصفحة كيفية إضفاء تنسيق على النص في فقرتك. لضبط التنسيق على مستوى الفقرة، يمكنك ضبط مَعلمات مثل 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 من أداة إنشاء مخطّط بيانات المعدّات، يتم ضبط 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 واجهة برمجة التطبيقات التجريبية: 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 في نظام عرض الرسائل والتغييرات التي تم إجراؤها على ميزة "إنشاء" وواجهات برمجة التطبيقات الجديدة 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

في الإخراج أعلاه، لاحظ أنّ سلوك 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

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

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

أفلام مُقترَحة لك

• ملاحظة: يتم عرض نص الرابط عندما تكون لغة JavaScript غير مفعّلة.
• نصّ النمط
• أساسيات تنسيق الرسائل
• القياسات الأساسية في تنسيقات ميزة "الإنشاء"