MathML (Mathematical Markup Language) এর মাধ্যমে গাণিতিক সমীকরণ এবং বৈজ্ঞানিক তথ্য ওয়েব পেজে প্রদর্শন করা হয়। তবে, এই উপাদানগুলির স্টাইল এবং লেআউট নিয়ন্ত্রণ করার জন্য External CSS (Cascading Style Sheets) ব্যবহার করা যেতে পারে। CSS ব্যবহার করে MathML এর উপাদানগুলির আকার, রঙ, ফন্ট, স্পেসিং এবং অন্যান্য ভিজ্যুয়াল প্রপার্টি কাস্টমাইজ করা সম্ভব।
External CSS কীভাবে MathML এ ব্যবহার করবেন
MathML এর জন্য External CSS ব্যবহার করতে, প্রথমে একটি CSS ফাইল তৈরি করতে হবে এবং তারপর সেই ফাইলটি HTML ডকুমেন্টের সাথে সংযুক্ত করতে হবে। CSS এর মাধ্যমে MathML ট্যাগগুলির স্টাইল পরিবর্তন করা যেতে পারে, যেমন গাণিতিক সমীকরণের ফন্ট সাইজ, স্টাইল, এবং রঙ পরিবর্তন।
১. External CSS ফাইল তৈরি
প্রথমে একটি CSS ফাইল তৈরি করুন, যেখানে MathML এর উপাদানগুলির জন্য স্টাইল নির্ধারণ করা হবে। উদাহরণস্বরূপ, আমরা mathml-style.css নামে একটি CSS ফাইল তৈরি করতে পারি।
/* mathml-style.css */
/* <math> ট্যাগের জন্য সাধারণ স্টাইল */
math {
font-family: 'Arial', sans-serif;
font-size: 18px;
color: #000000;
}
/* <mi> (variables) ট্যাগের জন্য স্টাইল */
mi {
font-style: italic;
color: #FF5733;
}
/* <mo> (operators) ট্যাগের জন্য স্টাইল */
mo {
color: #007BFF;
font-weight: bold;
}
/* <mn> (numbers) ট্যাগের জন্য স্টাইল */
mn {
font-size: 20px;
color: #28A745;
}
/* <mfrac> (fractions) ট্যাগের জন্য স্টাইল */
mfrac {
font-size: 1.2em;
line-height: 1.5;
}
এখানে, বিভিন্ন MathML ট্যাগের জন্য বিভিন্ন স্টাইল সেট করা হয়েছে, যেমন:
<math>ট্যাগের জন্য ফন্ট, সাইজ এবং রঙ।<mi>ট্যাগ (ভেরিয়েবল) এর জন্য ইটালিক এবং নির্দিষ্ট রঙ।<mo>ট্যাগ (অপারেটর) এর জন্য ফন্ট-বোল্ড এবং নির্দিষ্ট রঙ।<mn>ট্যাগ (সংখ্যা) এর জন্য ফন্ট সাইজ ও রঙ।<mfrac>ট্যাগ (ভগ্নাংশ) এর জন্য আকার এবং লাইনের উচ্চতা।
২. HTML ডকুমেন্টে External CSS যোগ করা
এবার আমাদের HTML ডকুমেন্টে সেই External CSS ফাইলটি যুক্ত করতে হবে। এটি HTML ডকুমেন্টের <head> ট্যাগের মধ্যে <link> ট্যাগ ব্যবহার করে করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathML with CSS</title>
<link rel="stylesheet" href="mathml-style.css">
</head>
<body>
<h1>MathML Example with External CSS</h1>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
</math>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
</body>
</html>
এখানে:
<link rel="stylesheet" href="mathml-style.css">ট্যাগটিmathml-style.cssCSS ফাইলটি HTML ডকুমেন্টে যোগ করে।
৩. MathML স্টাইলিং এর ফলাফল
এখন যখন আপনি HTML ডকুমেন্টটি ব্রাউজারে দেখবেন, MathML এর উপাদানগুলো CSS দ্বারা কাস্টমাইজড হবে। উপরের CSS উদাহরণে আমরা গাণিতিক ভেরিয়েবল, অপারেটর, সংখ্যা এবং ঘাতের জন্য বিভিন্ন স্টাইল নির্ধারণ করেছি।
উদাহরণ
উপরের HTML কোডটি MathML এর দুটি সমীকরণ দেখাবে:
- x + y
- x²
এই দুটি সমীকরণের প্রতিটির গাণিতিক উপাদানগুলির স্টাইল হবে CSS দ্বারা নির্ধারিত, যেমন ভেরিয়েবল x এবং y এর রঙ, অপারেটর + এর স্টাইল, এবং সংখ্যাগুলির আকার এবং রঙ।
উপসংহার
MathML এর জন্য External CSS ব্যবহার করলে আপনি সহজেই গাণিতিক সমীকরণ এবং বৈজ্ঞানিক উপাদানগুলির ভিজ্যুয়াল প্রেজেন্টেশন কাস্টমাইজ করতে পারবেন। CSS এর মাধ্যমে MathML এর বিভিন্ন উপাদান যেমন ভেরিয়েবল, অপারেটর, সংখ্যা, এবং ঘাতের ফন্ট সাইজ, রঙ, স্টাইল ইত্যাদি পরিবর্তন করা সম্ভব। এটি MathML কন্টেন্টকে আরও কার্যকরী এবং দেখতে সুন্দর করে তোলে, বিশেষত ওয়েব পেজে গাণিতিক সমীকরণ এবং বৈজ্ঞানিক তথ্য প্রদর্শনের ক্ষেত্রে।
Read more
