শৈলী অনুচ্ছেদ

এই পৃষ্ঠাটি বর্ণনা করে কিভাবে আপনি আপনার অনুচ্ছেদের জন্য পাঠ্য স্টাইল করতে পারেন। অনুচ্ছেদ-স্তরের স্টাইলিং সেট করতে, আপনি 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 ডানদিকে সারিবদ্ধ করে তা যাই হোক না কেন বর্ণমালা ব্যবহার করা হয়।

একটি অনুচ্ছেদে একাধিক শৈলী যোগ করুন

একটি অনুচ্ছেদে একাধিক শৈলী যোগ করার জন্য, আপনি একটি AnnotatedString এ ParagraphStyle ব্যবহার করতে পারেন, যা ইচ্ছামত টীকাগুলির শৈলীর সাথে টীকা করা যেতে পারে। একবার আপনার পাঠ্যের একটি অংশ একটি ParagraphStyle দিয়ে চিহ্নিত করা হলে, সেই অংশটি অবশিষ্ট পাঠ্য থেকে আলাদা করা হয় যেন এটির শুরুতে এবং শেষে লাইন ফিড থাকে।

একটি পাঠ্যে একাধিক শৈলী যুক্ত করার বিষয়ে আরও তথ্যের জন্য, পাঠ্যে একাধিক শৈলী যুক্ত করুন দেখুন।

এটি তৈরি করা আরও সহজ করার জন্য AnnotatedString একটি টাইপ-সেফ বিল্ডার রয়েছে: buildAnnotatedString । নিম্নলিখিত স্নিপেট ParagraphStyle সেট করতে buildAnnotatedString ব্যবহার করে:

@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 হল একটি লিগ্যাসি প্রপার্টি যা একটি পাঠ্যের প্রথম লাইনের উপরে এবং শেষ লাইনের নীচে ফন্ট মেট্রিক্সের উপর ভিত্তি করে অতিরিক্ত প্যাডিং যোগ করে। Compose BOM সংস্করণ 2024.01.01 থেকে শুরু করে, includeFontPadding ডিফল্টরূপে false সেট করা হয়েছে, যা সাধারণ ডিজাইন টুলের সাথে সঙ্গতিপূর্ণ ডিফল্ট টেক্সট লেআউটকে আরও আনে।

lineHeight কনফিগার করার ক্ষমতা নতুন নয়- এটি Android Q থেকে উপলব্ধ। আপনি lineHeight প্যারামিটার ব্যবহার করে Text জন্য lineHeight কনফিগার করতে পারেন, যা পাঠ্যের প্রতিটি লাইনে লাইনের উচ্চতা বিতরণ করে। তারপরে আপনি নতুন LineHeightStyle API ব্যবহার করতে পারেন আরও কনফিগার করতে কিভাবে এই টেক্সটটি স্থানের মধ্যে সারিবদ্ধ করা হয় এবং হোয়াইটস্পেস মুছে ফেলতে পারেন।

আপনি উন্নত নির্ভুলতার জন্য "sp" (স্কেল করা পিক্সেল) এর পরিবর্তে পাঠ্য ইউনিট "em" (আপেক্ষিক ফন্টের আকার) ব্যবহার করে lineHeight সামঞ্জস্য করতে চাইতে পারেন। একটি উপযুক্ত পাঠ্য ইউনিট নির্বাচন সম্পর্কে আরও তথ্যের জন্য, 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 পরীক্ষামূলক API-এর সাথে কনফিগারেশন ব্যবহার করে পাঠ্যকে আরও কেন্দ্রে এবং শৈলী করতে পারেন: 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 API-এর জন্য করা পরিবর্তনগুলি সম্পর্কে আরও জানতে কম্পোজ টেক্সট ব্লগ পোস্টে ফিক্সিং ফন্ট প্যাডিং দেখুন৷

লাইন বিরতি সন্নিবেশ

LineBreak এপিআই সেই মানদণ্ডকে সংজ্ঞায়িত করে যার দ্বারা পাঠ্য একাধিক লাইনে বিভক্ত হয়। আপনার Text কম্পোজেবলের TextStyle ব্লকে আপনি যে ধরনের লাইন ব্রেকিং চান তা নির্দিষ্ট করতে পারেন। প্রিসেট লাইন ব্রেকিং প্রকারের মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

• 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 লাইন ব্রেকিংয়ের চেয়ে দৃশ্যত ভারসাম্যপূর্ণ ফলাফল তৈরি করে।

লাইন বিরতি কাস্টমাইজ করুন

আপনি Strategy প্যারামিটারের সাথে আপনার নিজস্ব LineBreak কনফিগারেশনও তৈরি করতে পারেন। 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 বিবেচনা

এছাড়াও আপনি Strictness এবং WordBreak API-এর সাথে LineBreak কাস্টমাইজ করতে পারেন, যা বিশেষভাবে CJK ভাষার জন্য ডিজাইন করা হয়েছে। আপনি সবসময় নন-সিজেকে ভাষাগুলিতে এই APIগুলির প্রভাবগুলি দেখতে পাবেন না। সামগ্রিকভাবে, লাইন-ব্রেকিং নিয়মগুলি লোকেলের উপর ভিত্তি করে সংজ্ঞায়িত করা হয়।

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 API আপনাকে আপনার অ্যাপে হাইফেনেশন সমর্থন যোগ করতে দেয়। হাইফেনেশন বলতে বোঝায় একটি ড্যাশ-এর ​​মতো বিরাম চিহ্ন সন্নিবেশ করানো যাতে বোঝা যায় যে একটি শব্দ পাঠ্যের লাইন জুড়ে বিভক্ত। সক্রিয় করা হলে, উপযুক্ত হাইফেনেশন পয়েন্টে একটি শব্দের সিলেবলের মধ্যে হাইফেনেশন যোগ করা হয়।

ডিফল্টরূপে, হাইফেনেশন সক্রিয় করা হয় না। হাইফেনেশন সক্ষম করতে, একটি TextStyle ব্লকে একটি প্যারামিটার হিসাবে Hyphens.Auto যোগ করুন:

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 লাইন ব্রেকিং কৌশল ব্যবহার করেন, একটি শব্দের হাইফেনেশন তখনই ঘটে যখন একটি লাইন একক শব্দের চেয়ে ছোট হয়।
• আপনার ডিভাইসে উপযুক্ত লোকেল সেট করা আছে, কারণ সিস্টেমে উপস্থিত অভিধানগুলি ব্যবহার করে উপযুক্ত হাইফেনেশন নির্ধারণ করা হয়।

{% শব্দার্থে %} {% endverbatim %}

আপনার জন্য প্রস্তাবিত

• দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
• শৈলী পাঠ্য
• লেআউট বেসিক রচনা করুন
• রচনা লেআউটে অন্তর্নিহিত পরিমাপ

{% শব্দার্থে %} {% endverbatim %}