نمط الفقرة

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

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

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

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

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

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.d
p)
    )
}TextS
nippets.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، يتم ضبط 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

يمكنك الاطّلاع على منشور المدوّنة إصلاح حشو الخطوط في نص Compose لمعرفة المزيد عن سياق هذا التغيير، وكيفية عمل 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

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

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