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