AsciiDoc-এ রঙিন চৌরসের দেখানো: প্র্যাকটিক্যাল গাইড
Publié le 01 November 2025
ভূমিকা
প্রযুক্তিগত ডকুমেন্টেশন রচনার সময়, বিশেষ করে স্টাইল গাইড বা ব্যবহারকারী ইন্টারফেস স্পেসিফিকেশন জন্য, রঙের প্যালেট প্রদর্শন করতে হয় — இது স্বাভাবিক। AsciiDoc, যদিও ডকুমেন্টেশনের জন্য খুবই শক্তিশালী, রঙের নমুনা প্রদর্শনের জন্য কোনো নেটিভ সিনট্যাক্স প্রদান করে না। এই নিবন্ধটি এই সমস্যা খোঁজা বের করে এবং HTML ইনজেকশন ভিত্তিক একটি শৌল্যোদ্ভব সমাধান প্রস্তাব করে।
সমস্যা
ব্যবহারের প্রেক্ষাপট
কল্পনা করুন আপনি একটি ওয়েব অ্যাপ্লিকেশন থিমের CSS ভ্যারিয়েবলগুলো টিপস দিচ্ছেন। আপনার প্রয়োজন হল :
-
হেক্সাডেসিমাল রঙের কোড তালিকা করুন
-
প্রতিটি রঙের দৃশ্য প্রাকদর্শন দেখুন
-
সোর্স ডকুমেন্টের পঠনযোগ্যতা বজায় রাখুন
-
স্ট্যাটিক সাইট জেনারেটরের মতো JBake-এর সাথে সামঞ্জস্য নিশ্চিত করা
সম্ভাব্য পদ্ধতিগুলো
একটি AsciiDoc ডকুমেন্টে রং দেখানোর জন্য নানা সমাধান বিবেচনা করা যেতে পারে :
অপশন ১ : ইউনিকোড অক্ষর
</think>
অপশন ১ : ইউনিকোড অক্ষর
ইউনিকোড অক্ষরের ব্যবহারে`■`(■) সরল কিন্তু সীমিত :
* ■ --accent-color: #7952b3 (violet Bootstrap)সীমাবদ্ধতা : রঙে কোনো নিয়ন্ত্রণ নেই, সিস্টেম ফন্টে নির্ভর করে।
বিকল্প ২ : বাহ্যিক ছবি
প্রতিটি রংের জন্য PNG یا SVG চিত্র তৈরি করুন :
* image:colors/violet.svg[width=16] --accent-color: #7952b3Limitations : ভারী রক্ষণাবেক্ষণ, ফাইল সংখ্যা বাড়ে, অটোমেটিক সিঙ্ক্রোনাইজেশন নেই।
বিকল্প ৩: কাস্টম CSS ভূমিকা
CSS ক্লাস সেট করুন এবং AsciiDoc ভূমিকা ব্যবহার করে প্রয়োগ করুন :
* [.color-violet]##■## --accent-color: #7952b3সীমাবদ্ধতা : একটি বাহ্যিক শৈলী শীট প্রয়োজন, সমস্ত সম্ভাব্য রঙের পূর্বনির্ধারিত সংজ্ঞা।
Option 4: HTML ইনজেকশন (নির্বাচিত সমাধান)
ম্যাক্রো ব্যবহার করুন``pour HTML-এ inline style দিয়ে ইনজেক্ট করতে :
* pass:[<span style="display:inline-block;width:1em;height:1em;
background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>]
--accent-color: #7952b3 (violet Bootstrap)সমাধান: HTML ইনজেকশন দিয়ে
কাজের নীতি
ম্যাক্রো``AsciiDoc-এ raw কন্টেন্ট ইন্সার্ট করা যায়, যা AsciiDoc প্রসেসরে ব্যাখ্যা করা হবে না। এটি আমাদেরকে HTML-কে ইনলাইন CSS স্টাইলের সাথে সরাসরি ইনজেক্ট করতে দেয়।
Failed to generate image: PlantUML preprocessing failed: [From <input> (line 2) ] @startuml participant "দস্তাবেজ ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml participant "দস্তাবেজ AsciiDoc" as doc participant "প্রসেসর AsciiDoc" as processor participant "pass:[] macro" as pass participant "HTML অন্তিম" as html doc -> processor : Analyse document processor -> pass : Détecte pass:[] pass -> processor : Retourne HTML brut processor -> html : Insère sans transformation html -> html : Navigateur applique styles @enduml
বাস্তবায়ন
এখানে ইনজেক্ট করার জন্য HTML কাঠামো :
<span style="display:inline-block;
width:1em;
height:1em;
background:#7952b3;
vertical-align:middle;
margin-right:0.5em">
</span>CSS বৈশিষ্ট্যগুলো ব্যাখ্যা
| সম্পত্তি | ফাংশন |
|---|---|
|
এটি width/height সংজ্ঞায়িত করার অনুমতি দেয়, ইনলাইন প্রবাহে থাকা অবস্থা বজায় রেখে |
|
ফন্টের আপেক্ষিক বর্গের আকার (প্রতিক্রিয়াশীল) |
|
প্রদর্শনের রং (প্রয়োজনে পরিবর্তনযোগ্য) |
|
বর্গটি পাশের পাঠ্য সঙ্গে Samsajjyo kor |
|
বর্গ এবং পাঠ্যের মধ্যে দূরত্ব |
সম্পূর্ণ উদাহরণ
এখানে থিম প্যালেটকে document করার একটি উদাহরণ:
== Thème Clair
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#f8f9fa` (blanc cassé)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#212529` (noir très foncé)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#61428f;vertical-align:middle;margin-right:0.5em"></span>] --accent-hover: `#61428f` (violet plus foncé)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --card-bg: `#ffffff` (blanc)যে নিম্নলিখিত রেন্ডার তৈরি করে :
হালকা থিম
-
--bg-primary:`#f8f9fa`(অফ-ওয়াইট)
-
--text-primary:`#212529`(অতিশয় গহ্বর কালো)
-
--accent-color:`#7952b3`(বাইওলেট Bootstrap)
-
--accent-hover:`#61428f`(অधিক গভীর বেগুনি)
-
--card-bg:`#ffffff`(সাদা)
অপ্টিমাইজেশন এবং ভালো অনুশীলন
হালকা রঙ পরিচালনা
খুবই হালকা রঙ (সাদা, খুবই হালকা ধূসর) জন্য, সাদা ব্যাকগ্রাউন্ডে দৃশ্য রাখতে একটি বর্ডার যোগ করুন:
<span style="display:inline-block;width:1em;height:1em;
background:#ffffff;border:1px solid #ccc;
vertical-align:middle;margin-right:0.5em"></span>ধূসর বর্ডার (border:1px solid #ccc) সাদা বর্গের সীমা আঁকা সাদা পৃষ্ঠভূমির উপর অনুমতি দেয়.
বর্গের আকার সামঞ্জস্য করুন
আপনি আপনার প্রয়োজন অনুযায়ী বর্গের আকার সামঞ্জস্য করতে পারেন :
* pass:[<span style="display:inline-block;width:1.5em;height:1.5em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] Grand carré
* pass:[<span style="display:inline-block;width:0.8em;height:0.8em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] Petit carréএকক ব্যবহার`em`এটা নিশ্চিত করে যে বর্গগুলো ফন্টের আকারের সাথে সামঞ্জস্যপূর্ণ।
ভেরিয়েন্ট তৈরি করা
বিশেষ প্রয়োজনসমূহের জন্য, আপনি বিভিন্ন আকৃতি তৈরি করতে পারেন :
রঙিন বৃত্ত
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;border-radius:50%;vertical-align:middle;margin-right:0.5em"></span>] Cercle violetরঙযুক্ত বর্ডার والা বর্গ
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:3px solid #7952b3;vertical-align:middle;margin-right:0.5em"></span>] Bordure violetteসমাধানের আর্কিটেকচার
সুবিধা ও সীমাবদ্ধতা
সুবিধা
-
�✓ স্বায়ত্ত : বাহ্য ফাইলের কোনো নির্ভরতা নেই
-
✓ পোর্টেবিলিটি : AsciiDoc সমস্ত প্রসেসরের সাথে কাজ করে
-
✓ সমন্বয় : এই রঙের কোড সরাসরি HTML‑এ আছে
-
✓ প্রত্যাশনশীলতা : শৈলীর সম্পূর্ণ কাস্টমাইজেশন
-
✓ Maintenance : হেক্সাডেসিমাল কোডের সহজ পরিবর্তন
-
�✓ JBake সামঞ্জস্য : স্ট্যাটিক সাইট জেনারেটরদের সাথে সঠিকভাবে কাজ করে
সীমাবদ্ধতাগুলি
-
শব্দব্যাপ : AsciiDoc সোর্সে পুনরাবৃত্তি HTML কোড
-
�✗ উৎসের পঠনযোগ্যতা : উৎসের নথি কম স্পষ্ট
-
প্রবেশযোগ্যতা : কোনো স্বভাবিক বিকল্প টেক্সট নেই (ম্যানুয়ালি যোগ করতে হবে)
অ্যাক্সেসযোগ্যতার উন্নয়ন
স্ক্রীন রিডারদের জন্য বর্গগুলোকে অ্যাক্সেসযোগ্য করার জন্য :
* pass:[<span role="img" aria-label="Couleur violet Bootstrap"
style="display:inline-block;width:1em;height:1em;background:#7952b3;
vertical-align:middle;margin-right:0.5em"></span>]
--accent-color: `#7952b3` (violet Bootstrap)గुणাবలీ`role="img"` et `aria-label`সাহায্য প্রযুক্তিগুলিকে দৃশ্য বিষয়বস্তু বুঝতে এবং বর্ণনা করতে সক্ষম করে।
বাস্তব উদাহরণ: থিম ডকুমেন্টেশন
এখানে বিভিন্ন বিষয়কে ডকুমেন্ট করার একটি সম্পূর্ণ উদাহরণ:
= Guide des couleurs de l'application
== Thème Clair (`:root`)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#f8f9fa` (blanc cassé)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#212529` (noir très foncé)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap)
== Thème Sombre (`[data-bs-theme="dark"]`)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#212529` (noir très foncé)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #999;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#ffffff` (blanc)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#0d6efd;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#0d6efd` (bleu Bootstrap)
== Thème Contraste Élevé (`[data-bs-theme="high-contrast"]`)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#000000;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#000000` (noir)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #000;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#ffffff` (blanc)
* pass:[<span style="display:inline-block;width:1em;height:1em;background:#00ff00;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#00ff00` (vert vif)নিষ্কর্ষ
L’injection HTML via la macro ``d’AsciiDoc টেকনিকাল ডকুমেন্টেশনে রঙের নমুনা দেখাতে একটি সুন্দর ও ব্যাবহারিক সমাধান প্রদান করে। যদিও এটি কিছুটা শব্দবহুল, তবে এই পদ্ধতি সর্বোত্তম পোর্টেবিলিটি এবং সহজ রক্ষণাবেক্ষণ নিশ্চিত করে।
এই পদ্ধতিটি কোনো বাহ্যিক কনফিগারেশনের প্রয়োজন হয় না এবং কোনো অতিরিক্ট স্টাইলশীটের প্রয়োজন হয় না; এটি জেবেক এবং সমস্ত স্ট্যান্ডার্ড ASCII doc প্রসেসরের সাথে তাত্ক্ষণিকভাবে কাজ করে।
একবার আপনি আপনার প্রথম রঙিন বর্গ তৈরি করলে, আপনাকে শুধু HTML কোডটি কপি-পেস্ট করতে হবে এবং হেক্সাডেসিমাল কোড পরিবর্তন করে দ্রুত একটি সম্পূর্ণ প্যালেট তৈরি করতে পারবেন।
এই কৌশলটি কাস্টমাইজড দৃশ্য রেন্ডারিং প্রয়োজনীয় অন্য ব্যবহার ক্ষেত্রে প্রসারিত করা যেতে পারে: আইকন, বেজ, সিম্পল গ্রাফ, অথবা যেকোনো দৃশ্য উপাদান যেখানে শৈলীর সঠিক নিয়ন্ত্রণ প্রয়োজন।
সম্পদ
প্রকাশিত নিবন্ধ 2025-11-01