বহুভাষী ওয়েবসাইট নকশা করা এবং তৈরি করা

বেশ কয়েকটি ভাষায় বিষয়বস্তু প্রস্তুত করলে তা অনেকগুলি নতুন স্তর যোগ করে ওয়েব ডিসাইনের জটিলতায়| কিছু লিখন বা প্রবন্ধ অনুবাদ করা হল প্রথম বাঁধা, একটি বহুভাষী ওয়েবসাইট তৈরি করা বেশ কঠিন কাজ হতে পারে| কাজটি সঠিক করতে আমি কিছু উপায় বলে দেব এবং Tuts+ এ আমাদের কিছু অভিজ্ঞতার কথা বলব বহুভাষীর হবার|

1 অনুবাদিত হন|

প্রথম উপদেশটি ওয়েব ডিসাইন সম্বন্ধে নয়, কিন্তু তা সত্ত্বেও তা গুরুত্বপূর্ণ| আপনি যখন বেশ কয়েকটি ভাষায় আপনার বিষয়বস্তু প্রদর্শন করতে চান তখন কোন অনুবাদের সফ্টওয়েরের ওপর নির্ভর না করাই শ্রেষ্ঠ| আমাদের ভুল বুঝবেন না Google Translate এর মত যন্ত্র ব্যবহার করা সহজ এবং তা ক্রমাগত উন্নত হয়ে উঠছে, কিন্তু অনুবাদ করা লেখার নির্ভুলতায় ভিন্নতা দেখা যায় (Tuts+ এও আমরা এর স্বীকার হয়েছি কয়েকবার|

এই কারণে একজন মানুষ অনুবাদক নিয়োগ করা বাঞ্চনীয়| হয় Fliplingo -র মত অর্থ প্রদত্ত পরিসেবা বেছে নিন অথবা (আপনার প্রকল্পের ওপর নির্ভর করে) Native -এর মত সম্প্রদায়-চালিত অনুবাদের মঞ্চ ব্যবহার করুন| স্থানীয় শব্দভান্ডার এবং ভাষার সুক্ষ্য তারতম্য সম্বন্ধে মানুষের জ্ঞান শ্রেষ্ঠতর| eই লেখাটি প্রস্তুত করার সময় স্বয়ংক্রিয় সফ্টওয়ের সেই বিন্দুতে পৌঁছয়নি|

Tuts+এ আমরা আমাদের পাঠকদের ধন্যবাদ জানাই আমাদের টিউটোরিয়ালগুলি অনুবাদ করার জন্য|

ভাষার বিকল্পগুলি উপস্থিত করা     

একটি বহুভাষী ওয়েবসাইট যাতে ভাষা পরিবর্তনের ক্ষমতা নেই তা নিরর্থক| আপনি প্রায়শই দেখবেন বহুভাষী ওয়েবসাইটগুলি একটি ড্রপডাউন ব্যবহার করে যা পাতার ওপরের ডানদিকে অবস্থিত (বাদিক থেকে ডানদিকের বিষয়বস্তুর জন্য ওপরের বাদিকের কোনাটি বেশি উপযুক্ত) আপনি ফুটারে সুইচার পেতে পারেন (যে পন্থা IMB.com বেছে নিয়েছে)| যেই ছকটিই আপনি বেছে নিন, নিশ্চিত করুন যে ড্রপডাউনটি দেখা এবং ব্যবহার করা সহজ|

Tuts+ এ আমরা একটি সিলেক্ট এলিমেন্ট ব্যবহার করি পোস্ট মেটা বিবরণের মধ্যে, তার ওপর সাইডবারে একটি লিস্ট যাতে করে নিশ্চিত করা যায় যে বেসগুলি ঢাকা হয়েছে:

একটি সিলেক্ট এলিমেন্ট ব্যবহার করার বিকল্পটি যদি আপনি বেছে নেন তাহলে W3C কিছু সহায়ক নির্দেশাবলী সুপারিশ করে|

পতাকা 

পতাকা প্রায়শই ব্যবহৃত হয় একটি ভাষা বোঝাতে  কিন্তু, আমি গুনার বিটার্সম্যানের সাথে একমত যে আমি ভাষা পরিবর্তন করার জন্য পতাকা  ব্যবহারের পক্ষপাতি নই| নিম্নলিখিত কারণগুলি বিবেচনা করুন:

• পতাকা দেশের প্রতিনিধিত্ব করে, ভাষার নয়|
• একটি দেশের একাধিক সরকারী ভাষা থাকতে পারে|
• একটি ভাষা একাধিক দেশে বলা হতে পারে|
• দর্শনার্থীরা একটি পতাকা চিনতে নাও পারেন (আইকনের আয়তনের ফলে) অথবা তারা একই রকম দেখতে পতাকা দেখে বিভ্রান্ত হয়ে পরতে পারেন|

উদাহরণস্বরূপ:

ডুওলিঙ্গ ব্রেজিলিয় পতাকার ব্যবহারের পক্ষে এই যুক্তি দেন যে তারা ব্রেজিলিয় পর্তুগিজ শেখান| কিন্তু তাদের স্পেনীয় ভাষার বৈকল্পিকটি ল্যাটিন আমেরিকার স্পেনীয় ভাষার বেশি কাছে কাস্তেলানো (ঐতিহ্যগত স্পেনীয়) ভাষার তুলনায়, অতএব এখানে পতাকার ব্যবহার অসঙ্গতিপূর্ণ এবং বিভান্তি সৃষ্টিকারি|

সব চেয়ে ভালো হয় ভাষাটিকে তার নিজের ভাষায় অভিহিত করলে, উদাহরণস্বরূপ, ‘Deutsch’ বলা 'জার্মান' বলার বদলে| ভাষাগুলিকে অক্ষরের ক্রমানুসারে সাজালেও কাজ হবে, যাতে করে ব্যবহারকারি সহজেই সঠিক সংস্করণটি বার করতে পারেন| উইকিপিডিয়ার সাইডবারটি দেখুন প্রেরণা পাবার জন্য|

পুনঃনির্দেশ করা

কিছু ওয়েবসাইট ব্যবহারকারীকে পুনঃনির্দেশ করে তাদের হোমপেজে যখন তারা ভাষা পরিবর্তন করেন| এটি বিভ্রান্তি সৃষ্টি করতে পারে, কারণ ব্যবহারকারিকে তারপর পৃষ্ঠাটি আবার খুঁজে বার করতে হতে পারে| আপনার দর্শনার্থীদের খুশি রাখতে, যেখানে সম্ভব নিশ্চিত করুন যে একই (অনুবাদ করা) পৃষ্ঠাটি তাদের কাছে উপস্থিত করা hocche যখন তারা ভাষা পরিবর্তন করেন|

ডিফল্ট ভাষা সনাক্ত করা 

একটি ডিফল্ট ভাষা স্থাপন করতে চান যারা প্রথমবার আসছেন তাদের জন্য? ব্যবহারকারীর ভাষা সনাক্ত করা এবং স্বয়ংক্রিয়ভাবে ব্যবহারকারীর পছন্দের ভাষায় পৃষ্ঠাটি দেখানো সম্ভব| কিন্তু, অন্য বিকল্পগুলি গোপন রাখবেন না, যদি ব্যবহারকারি ভাষা পরিবর্তন করতে চান সেই ক্ষেত্রে|

আরো বেশি স্ম্যাশিং ম্যাগাজিন পড়ুন: আপনি কি ব্যবহারকারীকে জিজ্ঞেস করবেন না তাদের ব্রাউসারকে?

এনকোডিং এবং হরফ 

আপনার লেখা যেন পড়া যায়, অতএব নিশ্চিত করুন পৃষ্ঠার শীর্ষে অক্ষর/সংখ্যা/চিহ্নের এনকোডিং যেন সঠিকভাবে স্থাপিত করা হয়|

1

<meta charset="utf-8">

W3C থেকে:

"একটি ইউনিকোড ভিত্তিক এনকোডিং যেমন UTF-8 অনেক ভাষা সমর্থন করতে পারে এবং পৃষ্ঠা এবং ফর্ম মানিয়ে নিতে পারে ওই ভাষাগুলির যে কোন সংমিশ্রণে|"

তারপর বিবেচনা করুন আসল হরফগুলি: আপনার ওয়েবের হরফগুলি আপনি যে কটি ভাষা সমর্থন করছেন তার সাথে সঙ্গতিপূর্ণ হতে হবে, বিশেষ করে ল্যাটিন ভিত্তিক নয় এমন ভাষার জন্য| এর অর্থ যে হরফটি আপনি ব্যবহার করবেন তা অবশ্যই যেন সমস্ত অক্ষর/হরফ/চিহ্ন এবং গ্লিফ ধারণ করে যা আপনার সাধারণত প্রয়োজন হবে| কিছু ভাষায় শত শত অক্ষর আছে, যার ফলে হরফের ফাইলগুলি বেশ ভারী হয়ে পরে| অতএব, আপনি এই ফাইলগুলিতে যে অক্ষর/সংখ্যা/চিহ্নের সমষ্টি অন্তর্ভুক্ত করবেন তা পরিমার্জন করার কথা ভেবে দেখুন|

বেশ কিছু ওয়েবসাইট আছে যেখানে অ-লাতিন অক্ষর ভিত্তিক ফন্ট পাওয়া যায় যেমন typebank.co.jp, এবং দ্রুত Google এ অনুসন্ধান করলে তা আপনাকে আরও বিকল্প খুঁজে পেতে সাহায্য করবে|

অন্যান্য টাইপোগ্রাফিক বিবেচনার বিষয়ও আছে। ভুলে যাবেন না যে, কিছু নির্দিষ্ট ভাষা আরো "শব্দময়" হয় এবং এর ফলে আরও বেশি জায়গা নিয়ে থাকে। একটি বাটন যাতে ‘add to cart’ লেখা আছে ডাচ ভাষায় অনুবাদ করলে হয় ‘aan winkelwagen toevoegen’। ইংরেজী ভার্শনে আছে ১১ টি অক্ষর, আর ডাচ ভার্শনে ২৫, অর্থাৎ দ্বিগুণেরও বেশী জায়গা দরকার। যখন স্থান সংকুলান না হয়, আপনি তখন অন্য কিছু, কম আক্ষরিক অনুবাদের চেষ্টা করে দেখতে পারেন, অথবা ভাষার উপর ভিত্তি করে ফন্টের সাইজ পরিবর্তন করতে পারেন।

আপনার ল্যাটিন ডিফল্ট ফন্ট অনুযায়ী অন্যান্য অ-ল্যাটিন ফন্টের একটি ভিন্ন ধরনের লাইন-উচ্চতা, বা অক্ষরের আকার হতে পারে। উদাহরণস্বরূপ, চাইনিজ অক্ষর, লাতিন অক্ষরের তুলনায় দেখতে জটিল দেখায়, অর্থাৎ স্পষ্ট পার্থক্য তৈরির জন্য তাদের যথেষ্ট বড় হওয়া প্রয়োজন। এই বিষয়গুলি পৃষ্ঠার চেহারা অনেক পরিবর্তন করে দেয়, তাই এগুলো মাথায় রাখবেন।

৪। বাম থেকে ডানে এবং ডান থেকে বামে 

এখানে কিছু বিষয় আছে যে সম্পর্কে আপনি সচেতন নাও হতে পারেনঃ ভাষায় কোনও দিক নেই, কিন্তু যে স্ক্রিপ্টে তাদের লেখা হয় সেটার আছে। উদাহরনস্বরূপ, আজেরি (আজারবাইজানের মানুষের দ্বারা কথ্য) ল্যাটিন বা সিরিলিক স্ক্রিপ্টের ব্যবহার লেখা যেতে পারে, যে ক্ষেত্রে এটি LTR (বাম থেকে ডানে) লেখা হয়ে থাকে। অন্যভাবে এটা আরবি লিপিতেও লেখা যেতে পারে, যে ক্ষেত্রে এটা RTL (ডান থেকে বামে) লেখা হয়ে থাকে।

বেশিরভাগ ভাষাই এমন স্ক্রিপ্ট ব্যবহার করে যেটা লেখা এবং পড়া হয়ে থাকে বাম থেকে ডান দিকে, কিন্তু যেক্ষেত্রে এটা না হয়, সেক্ষেত্রে পুরো ওয়েব পেইজের লেআউটটিকে উল্টো করে দিতে হয়। হ্যাঁ, সমগ্র লেআউটটিকেই। লেখা, ছবি, ন্যাভিগেশন, সাইডবার, বাটনসমূহ, ড্রপডাউন মেনুসমুহ, স্ক্রল বারসহ...সবকিছুই প্রতিফলিত করা হয়ে থাকে।

টম মাসলেন ব্যাখ্যা করেছেন কিভাবে বিবিসি টিম Sass ব্যবহার করে তাদের দ্বি-মুখী লেআউট তৈরি করেছেনঃ

কনটেন্টের জন্য লেখার দিক নির্ধারণ করতে dir="rtl" অ্যাট্রিবিউট ব্যবহার করতে পারেন। এই এট্রিবিউট বা বৈশিষ্ট্যটি সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত। এখানে একটি HTML উদাহরণ:

1

<body dir="rtl">

অথবা CSS ব্যবহার করুনঃ

1

.content {

2

  direction: rtl;  /* Right to Left */

3

}

LTR এর ভিতর RTL

একটি অসুবিধা যা আমরা Tuts+ এ সম্মুখীন হই তা হচ্ছে RTL লেখার ভিতর inline code snippet বসানো (যেমনটি দেখা যায় আরবী, ফার্সি এবং হিব্রু অনুবাদের ক্ষেত্রে)। লেখাটি RTL-এই পড়া হবে, কিন্তু ভিতরের কোডটি অবশ্যই LTR থাকতে হবে। এই উদাহরনে, ইনলাইন কোডটি সর্বদা এভাবেই পড়তে হবে html, body { width: 100%; }:

মূল ইংরেজির পরে, আপনি দেখতে পারেন দ্বিতীয় উদাহরণের ভিতর ইনলাইন কোডটি কিভাবে দেখানো হয়েছে। ৩ নং উদাহরণ পর্যন্ত এটাকে ঠিক করার চেষ্টা করা হয়েছেঃ

1

.arabic code {

2

 direction: ltr;   

3

}

কিন্তু, আপনি দেখতে পাচ্ছেন এতে কোনও প্রভাবই হয়নি। এজন্যই এই জায়গায় unicode-bidi প্রোপার্টি এসেছে। embed ভ্যালুর সংগে মিলে, এটা আমাদের এমবেডেড উপাদানের জন্য ব্রাউজারের হিসাব অনুযায়ী দিক পরিবর্তন করতে সাহায্য করে। ৪ নং উদাহরনে দেখানো হয়েছে, যে এটা সত্যিই কার্যকরঃ

1

.arabic code {  

2

 direction: ltr;

3

 unicode-bidi: embed;

4

}

৫। URL গঠন

বহুভাষী ওয়েবসাইটগুলোর জন্য বেশ কয়েক ভাবেই URL গঠন করা যায়। প্রত্যেক অপশনেই সুবিধা এবং অসুবিধা আছে।

ccTLD

একটি কান্ট্রি কোড টপ-লেভেল ডোমেইন (ccTLD) একটি নির্দিষ্ট দেশের সাথে সম্পর্কিত থাকে, যেমন .fr ফ্রান্সের জন্য এবং .es স্পেনের জন্য।

ccTLD এর সার্চ ইঞ্জিনের জন্য একটি পরিষ্কার সিগন্যাল আছে যে, এই ওয়েবসাইটটি অমুক দেশের ব্যবহারকারীদেরকে লক্ষ্য করে তৈরি। সার্ভারের অবস্থান এক্ষেত্রে অপ্রাসঙ্গিক এবং এক্ষেত্রে ওয়েবসাইটগুলো আলাদা করা সহজ। সবচেয়ে বড় অসুবিধা হচ্ছে ডোমেইনের প্রাপ্যতা ও অতিরিক্ত খরচ।

Subdomain + gTLD

কিছু ডোমেইন এক্সটেনশনে একটি দেশ বা অঞ্চলের জন্য বাঁধা নেই। সবচেয়ে জনপ্রিয় হচ্ছে .com, কিন্তু একই ধরনের .net এবং .org ও জেনেরিক টপ লেভেল ডোমেইন হিসাবে ঘন ঘন ব্যবহৃত হয়।

এই gTLDগুলো কোনও কোনও সাবডোমেইনের সঙ্গে একযোগে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ fr.website.com। এটা স্থাপন করা খুবই সোজা এবং বেশীর ভাগ সার্চ ইঞ্জিনই এই ধরনের ভৌগলিক লক্ষ্য নির্ণয় করা বুঝতে পারে। যদিও, ব্যবহারকারীরা সর্বদা URL টির উপর ভিত্তি করে বিষয়বস্তুর ভাষা নাও চিনতে পারে।

Subdirectory + gTLD

সাবডিরেক্টরি হচ্ছে সাবডোমেইনের প্রতিপক্ষ। তাদের প্রায়শই বিষয়বস্তু গঠন করতে ব্যবহার করা হয় (উদাহরণস্বরূপ website.com/blog) অথবা website.com/tshirts), কিন্তু একইসাথে ভৌগলিক লক্ষ্য নির্ণয়ের উদ্দেশ্যেও ব্যবহার করা যেতে পারে। এইক্ষেত্রে আমরা website.com/fr ব্যবহার করে আমাদের URL গঠন করতে পারি।

এই পদ্ধতিতে, সবকিছু একই সার্ভারে হোস্ট করা যেতে পারে। বিন্যাস্ত করা খুবই সোজা এবং আপনি বিভিন্ন ভাষা শনাক্ত করতে Google Search Console ব্যবহার করতে পারেন। একটাই অসুবিধা তা হচ্ছে ব্যবহারকারীরা একা URL থেকে ভৌগলিক লক্ষ্য নির্ণয় করতে পারে না (যেমন, webshop.com/de/ কি জার্মান ভাষায় নাকি নয়?)

URL parameters

অবশেষে, এখানে URL প্যারামিটার রয়েছে, উদাহরণস্বরূপ website.com? country=it। URL প্যারামিটারের পরামর্শ দেওয়া হয় না, কারণ তাদের সার্চ ইঞ্জিনে ব্যাখ্যা করা কঠিন হয়।

ব্যক্তিগতভাবে, আমি একটি gTLD-র সঙ্গে একযোগে সাবডিরেক্টরি ব্যবহার করতে পছন্দ করি। সাবডোমেইন বেশীর ভাগ ক্ষেত্রে এমন বিষয়বস্তু আলাদা করতে ব্যবহৃত হয় যা সম্পূর্ণই আলাদা। কারন বহুভাষী ওয়েবসাইটগুলো মুলত একই বিষয়বস্তুর অনুবাদ হয়ে থাকে (বেশীরভাগ সময়েই), সাবডিরেক্টরি হচ্ছে এক্ষেত্রে একটি সুস্পষ্ট সমাধান।

আপনি URL এর ভিতর ভাষার ব্যবহার করতে পারেন, উদাহরণস্বরূপঃ

• website.com মানসম্মত US ভার্শনের জন্য।
• website.com/uk/ UK ভার্শনের জন্য।
• website.com/es/ স্প্যানিশভাষী ভিজিটরদের জন্য।

অথবা ভাষা এবং অবস্থান মিশিয়ে দিনঃ

• website.com/en-us/ US এর ইংরেজী ভাষী গ্রাহকদের জন্য।
• website.com/en-uk/ UK এর ইংরেজী ভাষী গ্রাহকদের জন্য।
• website.com/es-us/ US এর স্প্যানিশভাষী গ্রাহকদের জন্য।

নকল বিষয়বস্তু

নকল বিষয়বস্তুর সমস্যা এড়াতে, প্রত্যেক ভাষা/অবস্থানের জন্য একটি পছন্দসই সংস্করণ চিহ্নিত করা ভালো। আমরা এজন্য একটি সহজ HTML লিঙ্ক উপাদান ব্যবহার করতে পারি, যথা rel="alternate" hreflang="x"। একাধিক hreflang ট্যাগ একটি পৃষ্ঠায় ব্যবহার করা যায়; যা নিজেই বর্ণিত হবে এবং প্রতিটি বিকল্পের জন্য একটি করে লিঙ্ক থাকবে।

একটি ওয়েব পেইজে, এই কোডগুলো দেখতে এমন হতে পারেঃ

1

<link rel="alternate" href="example.com" hreflang="en-uk" />

2

<link rel="alternate" href="example.com/us/" hreflang="en-us" />

3

<link rel="alternate" href="example.com/au/" hreflang="en-au" />

এই কোড সার্চ ইঞ্জিনকে বলে যে, example.com টি UK এর ইংরেজীভাষীদের লক্ষ্য করে তৈরি। এটা আরও বলে যে এখানে একই বিষয়বস্তুর দুই রকমের বৈচিত্র আছে, যথা একটি US এর জন্য এবং অন্যটি অস্ট্রেলিয়ার জন্য।

অন্যান্য বিবেচ্য বিষয়

যখন বহুভাষী ওয়েবসাইট নকশা করা হয়, তখন আরও কিছু বিবেচ্য বিষয় আছে, যেমনঃ

তারিখ

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

নীতিগত উদ্বেগের বিষয়

একেক দেশের একেকরকম নৈতিক মতামত আছে। যেখানে যৌনতা, হাস্যরস, প্রতীক ইত্যাদির সংস্কৃতি-নির্দিষ্ট প্রকৃতি আছে। যা একটি ওয়েবসাইট অনুবাদ করার সময় সহজেই পরিলক্ষিত হয়। উদাহরণস্বরূপঃ কিছু দেশে একটি সমকামী দম্পতির ছবি দেখানো গ্রহণযোগ্য, যখন অন্যান্য দেশে এটাকে আক্রমনাত্মক হিসেবে দেখা হয়।

ক্যাপচা

আপনি কি আপনার ওয়েবসাইটে একটি ক্যাপচা ব্যবহার করছেন? নিশ্চিত হউন যে এটা পেইজের বিষয়বস্তুর ভাষার সাথে মিল রেখে করা হয়েছে। একজন UK ভিজিটর হিসেবে, আপনি একটি রাশিয়ান ক্যাপচা সমাধান করতে চাইবেন এ সম্ভাবনা খুব কম।

ফোন নম্বরসমূহ

কান্ট্রি কোড সহ আপনার ওয়েবসাইটে ফোন নম্বর দিয়ে আপনার দর্শকদের সহায়তা করুন। আপনি সব কান্ট্রি কোড সহ একটি লিস্ট এই পেইজে খুঁজে পাবেন।

এগিয়ে যান এবং অনুবাদ করুন!

যখন একটি ওয়েবসাইট সম্পূর্ণভাবে সর্বজাতির জন্য উন্মুক্ত করা হয়, এখানে অনেক বিবেচ্য বিষয় আছে। কিন্তু এই ইশারাগুলো আপনাকে কাজ শুরু করার জন্য একটি ভাল ভিত্তি দিবে।  কমেন্টে আমাদের জানান বহুভাষী ওয়েবসাইটের জন্য আপনার কাছে আর অন্য কি টিপস আছে, এবং Tuts+ Translation Project newsletter এর জন্য সাইনআপ করুন যদি আপনি আমাদের থেকে আরও পরামর্শ পেতে আগ্রহী হয়ে থাকেন!

আরও পড়ুন

• flagsarenotlanguages.com
• Using select to link to localized content on W3C
  
• Select Country; Select Language on UX Magazine
  
• About languages and flags by Gunnar Bittersmann
  
• 13 tips for making responsive web design multi-lingual by Tom Maslen
• The Tuts+ Translation Project newsletter
  
• Flags for thumbnail by Matt D. Smith