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

এই পৃষ্ঠায় বর্ণনা করা হয়েছে কীভাবে আপনি আপনার প্যারাগ্রাফের টেক্সট স্টাইল করতে পারেন। প্যারাগ্রাফ-স্তরের স্টাইলিং সেট করতে, আপনি textAlign এবং lineHeight মতো প্যারামিটার কনফিগার করতে পারেন অথবা আপনার নিজস্ব ParagraphStyle সংজ্ঞায়িত করতে পারেন।

টেক্সট অ্যালাইনমেন্ট সেট করুন

textAlign প্যারামিটারটি আপনাকে একটি Text composable surface area`-র মধ্যে থাকা টেক্সটের আনুভূমিক অ্যালাইনমেন্ট নির্ধারণ করতে দেয়।

ডিফল্টরূপে, 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 যে বর্ণমালাই ব্যবহার করা হোক না কেন, ডানদিকেই অ্যালাইন করে।

একটি অনুচ্ছেদে একাধিক স্টাইল যোগ করুন

একটি প্যারাগ্রাফে একাধিক স্টাইল যোগ করতে, আপনি একটি 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")
            }
        }
    )
}

তিনটি ভিন্ন শৈলীতে তিনটি অনুচ্ছেদ: নীল, লাল ও গাঢ়, এবং সাধারণ কালো।

লাইনের উচ্চতা এবং প্যাডিং সামঞ্জস্য করুন

includeFontPadding একটি লিগ্যাসি প্রপার্টি যা ফন্ট মেট্রিক্সের উপর ভিত্তি করে কোনো টেক্সটের প্রথম লাইনের উপরে এবং শেষ লাইনের নীচে অতিরিক্ত প্যাডিং যোগ করে। Compose BOM ভার্সন 2024.01.01 থেকে, includeFontPadding ডিফল্টরূপে false সেট করা থাকে, যা ডিফল্ট টেক্সট লেআউটকে প্রচলিত ডিজাইন টুলগুলোর সাথে আরও সামঞ্জস্যপূর্ণ করে তোলে।

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

আরও ভালো নির্ভুলতার জন্য আপনি 'sp' (স্কেলড পিক্সেল)-এর পরিবর্তে 'em' (আপেক্ষিক ফন্ট সাইজ) টেক্সট ইউনিট ব্যবহার করে lineHeight অ্যাডজাস্ট করতে পারেন। উপযুক্ত টেক্সট ইউনিট নির্বাচন সম্পর্কে আরও তথ্যের জন্য, TextUnit ) দেখুন।

ছবিতে লাইনহাইটকে এর ঠিক উপরে ও নিচের লাইনগুলোর উপর ভিত্তি করে একটি পরিমাপ হিসাবে দেখানো হয়েছে।
চিত্র ১। নির্ধারিত lineHeight মধ্যে টেক্সটকে সামঞ্জস্য করতে Alignment এবং Trim ব্যবহার করুন, এবং প্রয়োজনে অতিরিক্ত স্থান ছেঁটে ফেলুন।

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 API-এর কনফিগারেশন ব্যবহার করে টেক্সটকে আরও ভালোভাবে কেন্দ্রস্থ ও স্টাইল করতে পারবেন: LineHeightStyle.Alignment এবং LineHeightStyle.Trim (Trim কাজ করার জন্য includeFontPadding অবশ্যই false সেট করতে হবে)। Alignment এবং Trim টেক্সটের লাইনগুলোর মাঝের পরিমাপ করা ফাঁকা স্থান ব্যবহার করে সেটিকে সমস্ত লাইনে আরও যথাযথভাবে বন্টন করে—যার মধ্যে একটি একক টেক্সট লাইন এবং একটি টেক্সট ব্লকের প্রথম লাইনও অন্তর্ভুক্ত।

LineHeightStyle.Alignment নির্ধারণ করে যে লাইন হাইট দ্বারা প্রদত্ত স্থানে লাইনটি কীভাবে সারিবদ্ধ হবে। প্রতিটি লাইনের মধ্যে, আপনি টেক্সটকে উপরে, নীচে, কেন্দ্রে বা আনুপাতিকভাবে সারিবদ্ধ করতে পারেন। এরপর, যেকোনো lineHeight এবং Alignment সমন্বয়ের ফলে তৈরি হওয়া আপনার টেক্সটের প্রথম লাইনের উপরে এবং শেষ লাইনের নীচে থাকা অতিরিক্ত স্থান LineHeightStyle.Trim আপনাকে রাখতে বা সরিয়ে ফেলতে দেয়। নিম্নলিখিত নমুনাগুলি দেখায় যে অ্যালাইনমেন্ট কেন্দ্রে ( LineHeightStyle.Alignment.Center ) থাকলে বিভিন্ন LineHeightStyle.Trim কনফিগারেশনের সাথে একাধিক লাইনের টেক্সট কেমন দেখায়।

LineHeightStyle.Trim.None প্রদর্শনকারী একটি চিত্র।LineHeightStyle.Trim.Both প্রদর্শনকারী একটি চিত্র।
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop প্রদর্শনকারী একটি চিত্র।LineHeightStyle.Trim.LastLineBottom প্রদর্শনকারী একটি চিত্র।
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

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

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

লাইনব্রেক এপিআই LineBreak API) নির্ধারণ করে দেয় যে কোন মানদণ্ডের ভিত্তিতে টেক্সট একাধিক লাইনে বিভক্ত হবে। আপনি আপনার Text কম্পোজেবল (Text composable)-এর 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
                )
            )
        }
    )
)

একটি টেক্সট ব্লক যেখানে একটি সাধারণ লাইন ব্রেকিং কৌশল দেখানো হয়েছে, তার সাথে একটি প্যারাগ্রাফ-অপ্টিমাইজড ব্রেকিং কৌশলযুক্ত টেক্সট ব্লকের তুলনা। সাধারণ লাইন ব্রেকিং কৌশলযুক্ত টেক্সট ব্লকটিতে লাইনের দৈর্ঘ্যে অধিক বৈচিত্র্য রয়েছে।
চিত্র ১. সাধারণ লাইন ব্রেকিং কৌশলযুক্ত একটি টেক্সট ব্লক (উপরে) বনাম প্যারাগ্রাফ-অপ্টিমাইজড লাইন ব্রেকিংযুক্ত একটি টেক্সট ব্লক (নীচে)।

উপরের আউটপুটে লক্ষ্য করুন যে, Simple লাইন ব্রেকিং-এর তুলনায় Paragraph লাইন ব্রেকিং পদ্ধতিটি আরও দৃষ্টিনন্দন ফলাফল প্রদান করে।

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

আপনি 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
            )
        }
    )
)

ভারসাম্যপূর্ণ লাইন ব্রেকিং কৌশলসহ একটি অনুচ্ছেদ এবং কৌশল ছাড়া বিন্যাস করা একটি অনুচ্ছেদ। ভারসাম্যপূর্ণ লাইন ব্রেকিং কৌশলসহ অনুচ্ছেদটির লাইনগুলোর দৈর্ঘ্য ডিফল্টের চেয়ে বেশি সামঞ্জস্যপূর্ণ।
চিত্র ২. Balanced লাইন-ব্রেকিং কৌশল ব্যবহার করে বিন্যস্ত একটি অনুচ্ছেদ (উপরে) বনাম কোনো লাইন-ব্রেকিং কৌশল ছাড়া বিন্যস্ত একটি অনুচ্ছেদ।

সিজেকের বিবেচনা

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

Strictness নিম্নলিখিত বৈশিষ্ট্য সহ লাইন ভাঙার কঠোরতা বর্ণনা করে:

  • Default — লোকেলের জন্য ডিফল্ট নিয়ম ভঙ্গকারী। এটি Normal বা Strict অনুরূপ হতে পারে।
  • Loose — সবচেয়ে কম বিধিনিষেধযুক্ত নিয়ম। ছোট লাইনের জন্য উপযুক্ত।
  • Normal — লাইন ভাঙার সবচেয়ে প্রচলিত নিয়মগুলো।
  • Strict — লাইন ভাঙার ক্ষেত্রে সবচেয়ে কঠোর নিয়ম।

WordBreak নির্ধারণ করে যে শব্দের মধ্যে কীভাবে লাইন ব্রেক যুক্ত করা হবে, যার নিম্নলিখিত বৈশিষ্ট্যগুলো রয়েছে:

  • Default — লোকালের জন্য ডিফল্ট নিয়ম ভঙ্গ করা।
  • Phrase — লাইন বিভাজন বাক্যাংশের উপর ভিত্তি করে করা হয়।

নিম্নলিখিত কোড স্নিপেটটিতে একটি জাপানি টেক্সটের জন্য Strict strictness এবং Phrase word breaking সেটিং ব্যবহার করা হয়েছে:

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
    )
)

Strictness এবং WordBreak সেটিংস সহ জাপানি টেক্সট বনাম ডিফল্ট টেক্সট।
চিত্র ৩। Strictness এবং WordBreak সেটিংস দিয়ে ফরম্যাট করা টেক্সট (উপরে) বনাম শুধুমাত্র LineBreak.Heading দিয়ে ফরম্যাট করা টেক্সট (নিচে)।

একাধিক লাইনে বিভক্ত হাইফেনযুক্ত টেক্সট

Hyphens এপিআই আপনাকে আপনার অ্যাপে হাইফেনেশন সাপোর্ট যোগ করার সুযোগ দেয়। হাইফেনেশন বলতে বোঝায়, কোনো শব্দকে একাধিক লাইনে ভাগ করার জন্য ড্যাশের মতো একটি যতিচিহ্ন ব্যবহার করা। এটি সক্রিয় করা হলে, শব্দের সিলেবলগুলোর মাঝে উপযুক্ত হাইফেনেশন পয়েন্টে হাইফেনেশন যুক্ত হয়।

ডিফল্টরূপে, হাইফেনেশন সক্রিয় থাকে না। হাইফেনেশন সক্রিয় করতে, একটি 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
                )
            )
        }
    )
)

হাইফেনেশন সক্রিয় না থাকা একটি অনুচ্ছেদ এবং হাইফেনেশন সক্রিয় থাকা একটি অনুচ্ছেদ। যখন হাইফেনেশন সক্রিয় থাকে, তখন একটি শব্দে হাইফেন যুক্ত হয় এবং সেটি দুটি লাইনে বিভক্ত হয়ে যায়।
চিত্র ৪। হাইফেন ব্যবহার না করা একটি অনুচ্ছেদ (উপরে) বনাম হাইফেন ব্যবহার করা একটি অনুচ্ছেদ (নিচে)।

সক্রিয় করা হলে, শুধুমাত্র নিম্নলিখিত শর্তগুলির অধীনে হাইফেন ব্যবহৃত হয়:

  • একটি শব্দ একটি লাইনে আঁটে না। আপনি যদি একটি Simple লাইন ভাঙার কৌশল ব্যবহার করেন, তবে একটি শব্দে হাইফেন তখনই ব্যবহৃত হয় যখন লাইনটি সেই একক শব্দটির চেয়ে ছোট হয়।
  • আপনার ডিভাইসে উপযুক্ত লোকেল সেট করা আছে, এবং সিস্টেমে থাকা অভিধান ব্যবহার করে যথাযথ হাইফেনেশন নির্ধারণ করা হয়।
{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}