সিএসএস৩ টেক্সট এফেক্ট - Css3 Text Effects


লেখার এই রকম অবস্থান
সিএসএস 3.0 এর
writing-mode প্রোপার্টি
ব্যাবহার করে করা হয়েছে।


নতুন প্রোপার্টি

সিএসএস 3.0 তে কোন লেখা বা text এর ওপর আরও সুন্দর ও সাবলীল ভাবে নিয়ন্ত্রন করা যায়। এর জন্য যে সকল নতুন প্রোপার্টি সিএসএস এ যুক্ত করা হয়েছে, সেগুলো হল নিম্নরূপ।


text-overflow

কখনও কখনও লেখা বা text, ধারক বা container অথবা স্ক্রীন এর থেকে উপচে পরে অর্থাৎ overflow হয়। এতে লেখা বা text কন্টেন্ট গুলো ব্যাবহারকারীর কাছে ঠিক মত বা সঠিক ভাবে প্রদর্শিত হয় না, ফলশ্রুতিতে বাজে user experiance তৈরি হয়।

সিএসএস এর 3.0 সংস্করণে যুক্ত text-overflow প্রোপার্টি ব্যাবহার করে ব্যবহারকারীকে একটি সংকেত প্রদান করা যায়। নিচে এর কয়েকটি ব্যাবহারিক উদাহরন দেখুন।

clip

এখানে text-overflow:clip ব্যাবহার করা হয়েছে।

ellipsis

এখানে text-overflow:ellipsis ব্যাবহার করা হয়েছে।

সিএসএস text-overflow প্রোপার্টির যে সকল মান নির্ধারণ করা যায়, সেগুলো হল - clip, ellipsis, string, initial ও inherit.

text-overflow প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

/* Overflow behavior at line end Right end if LTR, left end if RTL */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";

কোড এডিটর


লেখা বা text কে তার ধারক থেকে overflow করার জন্য কিছু সিএসএস প্রোপার্টি ব্যবহার করতে হয়। উদাহরণ স্বরুপ - সিএসএস এর overflow: hidden;white-space: nowrap; প্রোপার্টির কথা বলা যায়। নিচে একটি উদাহরন দেখুন।

উদাহরণ

overflow: hidden;
white-space: nowrap;

কোড এডিটর



word-break

সিএসএস 3.0 এর word-break ব্যাবহার করে কোন এইচটিএমএল কন্টেন্ট অর্থাৎ লেখা বা text উপচে পড়লে বা overflow হলে লাইন ব্রেক হবে কি না তা নির্ধারণ করা হয়। এখানে যে সকল মান নির্ধারণ করা যায় তা হল keep-all, break-all ইত্যাদি।

নিচে একটি উদাহরণ দেখুন, যেখানে সিএসএস word-break প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

p {
  width: 300px;
  background-color: gray;
  height: 80px;
  border: 1px dotted green;
  word-break: keep-all;
  }

কোড এডিটর


নোট - সিএসএস word-break প্রোপার্টি অপেরা 12 এবং এর পূর্ববর্তী সংস্করণ বা version গুলোতে সমর্থন বা support করে না।


word-wrap

সিএসএস এর word-wrap প্রোপার্টি ব্যাবহার করে, কোন দীর্ঘ শব্দ বা word ভেঙে নতুন লাইন এ যাবে কি না তা নির্ধারণ করা হয়। অর্থাৎ কোন বড় শব্দের অবস্থা নির্ধারণ করতে এই প্রোপার্টি ব্যাবহৃত হয়।

নিচে word-wrap প্রোপার্টি ব্যাবহার করে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

p {
  word-wrap: break-word;
  }

কোড এডিটর



writing-mode

সিএসএস 3.0 এর writing-mode প্রোপার্টি ব্যাবহার করে কোন লেখা বা text এর আনুভূমিক বা horizontal এবং উলম্ব বা vertical অবস্থান নির্ধারণ করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

লেখার এই রকম অবস্থান
সিএসএস 3.0 এর
writing-mode প্রোপার্টি
ব্যাবহার করে করা হয়েছে।

writing-mode প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

p.vertical {
   writing-mode: vertical-rl;
   }

কোড এডিটর



ব্রাউজার সমর্থন

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -o- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ বা version যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

সকল লেখার প্রোপার্টি

প্রোপার্টিমানবর্ণনা
text-overflow
word-break
word-wrap
writing-mode
text-overflow
text-justify