প্যারাগ্রাফের স্টাইল

এই পৃষ্ঠায় আপনার প্যারাগ্রাফের টেক্সটকে কীভাবে স্টাইল করতে পারবেন তা বর্ণনা করা হয়েছে। প্যারাগ্রাফ-লেভেল স্টাইলিং সেট করতে, আপনি 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.Left এবং TextAlign.Right-এর পরিবর্তে যথাক্রমে TextAlign.Start এবং TextAlign.End ব্যবহার করুন, কারণ এগুলি পছন্দসই ভাষা টেক্সট ওরিয়েন্টেশনের উপর নির্ভর করে 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.Alignment.Center) মাল্টি-লাইন টেক্সট বিভিন্ন LineHeightStyle.Trim কনফিগারেশনের সাথে কেমন দেখতে লাগে।

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

এই পরিবর্তন, includeFontPadding কীভাবে View সিস্টেমে কাজ করে এবং Compose ও নতুন LineHeightStyle API-এর জন্য করা পরিবর্তন সম্পর্কে আরও জানতে Compose টেক্সটে ফন্ট প্যাডিং সংক্রান্ত সমস্যার সমাধান করা ব্লগ পোস্ট দেখুন।

লাইন ব্রেক যোগ করা

LineBreak API সেইসব শর্তাবলী নির্ধারণ করে যার মাধ্যমে টেক্সটকে একাধিক লাইনে ভাগ করা হয়। আপনার 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 — হাইফেনেশন চালু করা থাকলে তা সহ আরও পাঠযোগ্য টেক্সটের জন্য প্যারাগ্রাফ অপ্টিমাইজ করে। (Should be a default for everything that's not Balanced or 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 ভাষার জন্য ডিজাইন করা হয়েছে। আপনি সবসময় 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 লাইন ব্রেকিং স্ট্র্যাটেজি ব্যবহার করেন, তাহলে কোনও লাইন যদি একটি শব্দের চেয়ে ছোট হয়, তবেই কোনও শব্দের হাইফেনেশন ঘটে।
• আপনার ডিভাইসে উপযুক্ত লোকেল সেট করা আছে, কারণ সিস্টেমের ডিকশনারি ব্যবহার করে উপযুক্ত হাইফেনেশন নির্ধারণ করা হয়।