ফর্ম নিয়ন্ত্রণ উপাদানের জন্য CSS উল্লম্ব লেখার মোড

ডি ঝাং
Di Zhang

ক্রোম 119 থেকে 123 পর্যন্ত রোল আউট হচ্ছে CSS রাইটিং মোড লেভেল 4 থেকে একটি নতুন আন্তর্জাতিক CSS বৈশিষ্ট্য। ফর্ম নিয়ন্ত্রণ উপাদানগুলির জন্য উল্লম্ব লেখার মোড মানে এই উপাদানগুলি উল্লম্ব লেখার মোডে প্রদর্শিত হতে পারে। Chrome 123 দ্বারা বৈশিষ্ট্যটি সমস্ত ব্যবহারকারীর জন্য সক্ষম হবে, এই পোস্টটি বৈশিষ্ট্যটি ব্যাখ্যা করে।

পাঠ্য-ভিত্তিক ফর্ম নিয়ন্ত্রণ উপাদানগুলির জন্য উল্লম্ব লেখার মোড

একবার এই বৈশিষ্ট্যটি সম্পূর্ণরূপে সক্ষম হলে, ফর্ম নিয়ন্ত্রণ উপাদান যেমন বোতাম, তালিকা নির্বাচন এবং অগ্রগতি উপাদানগুলির জন্য উল্লম্ব লেখার মোডগুলি ব্যবহার করা সম্ভব হবে৷ এটি ব্যবহার করার জন্য, CSS প্রপার্টি রাইটিং-মোডকে বাম-থেকে-ডান ব্লক প্রবাহ দিকনির্দেশের জন্য vertical-lr এবং ডান-থেকে-বাম ব্লক প্রবাহ দিকনির্দেশের জন্য vertical-rl সেট করুন।

এটি অনেক পূর্ব এশীয় ভাষার জন্য দরকারী যেগুলি ঐতিহ্যগতভাবে লেখার জন্য উল্লম্ব স্ক্রিপ্ট ব্যবহার করে। উদাহরণস্বরূপ, ঐতিহ্যগত জাপানি প্রায়ই ডান থেকে বামে উল্লম্বভাবে লেখা হয়।

উল্লম্ব লেখার মোডের উদাহরণ

এখানে উল্লম্ব ফর্ম নিয়ন্ত্রণের কিছু আন্তর্জাতিক উদাহরণ রয়েছে।

বোতাম

<html lang="zh">

<button>请点击</button>
button {
  writing-mode: vertical-rl;
}

উল্লম্ব পাঠ্য সহ একটি বোতাম।

<select> উপাদান

আপনি নির্দিষ্ট করতে পারেন যে একটি <select> উপাদান উল্লম্বভাবে সমস্ত পাঠ্য প্রদর্শন করবে।

select {
  writing-mode: vertical-lr;
}
<select multiple>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

<select>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

উল্লম্ব পাঠ্য সহ একটি নির্বাচন তালিকা।

মনে রাখবেন যে বর্তমান বাস্তবায়নে এখনও পপআপ উইন্ডোর বিকল্পগুলি অনুভূমিকভাবে প্রদর্শিত হয়।

পাঠ্য-ভিত্তিক ইনপুট

অনেক টেক্সট ইনপুট ভিত্তিক ফর্ম কন্ট্রোলের জন্য, এখন টেক্সট এন্টার করার সময় উল্লম্ব লেখার মোড ব্যবহার করা সম্ভব।

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

উল্লম্ব টেক্সট সহ একটি টেক্সটেরিয়া।

স্লাইডার

এটি একটি ফর্ম উপাদানের মান দৃশ্যমানভাবে প্রদর্শন করা মূল্যবান হতে পারে। <meter> , <progress> এবং <input type=range> এর মতো স্লাইডারগুলি তাই করে।

স্লাইডার নিয়ন্ত্রণ বিভিন্ন.

পূর্বে, শুধুমাত্র <range> অ-মানক CSS উপস্থিতি মান slider-vertical ব্যবহার করে উল্লম্বভাবে রেন্ডার করা যেতে পারে। এখন, তিনটিই সিএসএস writing-mode বৈশিষ্ট্য ব্যবহার করে উল্লম্বভাবে প্রদর্শিত হতে পারে।

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

স্লাইডার নিয়ন্ত্রণ উল্লম্বভাবে প্রদর্শিত হয়.

ডিফল্টরূপে, CSS দিকনির্দেশ ltr এ সেট করা থাকে। এর মানে হল মান উপরে থেকে নীচে রেন্ডার করা হবে। আপনি rtl হিসাবে দিকনির্দেশ সেট করে নীচে থেকে উপরে মানটির দিকনির্দেশ নির্দিষ্ট করতে পারেন।

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

স্লাইড নিয়ন্ত্রণগুলি নীচে থেকে উপরে উল্লম্বভাবে প্রদর্শিত হয়।

Chrome 122-এ মান দিক পরিবর্তনের জন্য একটি পরীক্ষা রয়েছে৷ আপনার মতামত থাকলে আমাদের জানান৷

জড়িত এবং মতামত শেয়ার করুন

এই বৈশিষ্ট্যগুলি সম্পর্কে প্রতিক্রিয়া জানাতে, crbug.com- এ একটি সমস্যা ফাইল করুন৷