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

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

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

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

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 — আরও সহজে পড়া যায় এমন টেক্সটের জন্য অনুচ্ছেদ অপ্টিমাইজ করে, যার মধ্যে হাইফেনেশন চালু থাকলে সেটিও অন্তর্ভুক্ত। (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 ভাষার জন্য ডিজাইন করা হয়েছে। আপনি হয়ত সবসময় নন-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 = customTitleLineBre
ak
    )
)TextS
nippets.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 লাইন ব্রেকিং স্ট্র্যাটেজি ব্যবহার করলে, কোনও শব্দে হাইফেনেশন তখনই হয় যখন লাইনটি একটি শব্দের চেয়েও ছোট হয়।
• আপনার ডিভাইসে উপযুক্ত লোকেল সেট করা আছে, কারণ সিস্টেমে উপস্থিত অভিধান ব্যবহার করে উপযুক্ত হাইফেনেশন নির্ধারণ করা হয়।