Google Transliterate API বিকাশকারীর নির্দেশিকা

এই বিকাশকারীর গাইড দেখায় কিভাবে Google Transliterate API ব্যবহার করতে হয়। এই JavaScript API এর সাহায্যে, আপনি একটি প্রদত্ত পাঠ্য ব্লকের ভাষা সনাক্ত করতে পারেন এবং এটিকে একটি ভিন্ন স্ক্রিপ্টে প্রতিবর্ণীকরণ করতে পারেন।

ভূমিকা

এই বিকাশকারীর নির্দেশিকাটি API-এর কনফিগারযোগ্য জাভাস্ক্রিপ্ট উপাদানগুলির দানাদার ব্যাখ্যা সহ Google Transliterate API ব্যবহার করার জন্য একটি মৌলিক মডেল প্রদান করে। আপনি আপনার পৃষ্ঠায় টেক্সট ট্রান্সলিটারেট করতে এই গাইড ব্যবহার করতে পারেন।

ব্যাপ্তি

এই নথিটি বর্ণনা করে যে কীভাবে ট্রান্সলিটারেট API-এর জন্য নির্দিষ্ট ফাংশন এবং বৈশিষ্ট্যগুলি ব্যবহার করতে হয়।

ব্রাউজার সামঞ্জস্য

Transliterate API Firefox 1.5+, IE6+, Safari এবং Chrome সমর্থন করে। ট্রান্সলিটারেট API প্রায় প্রতিটি ব্রাউজারে ত্রুটি ছাড়াই লোড করা যেতে পারে, তাই আপনি সামঞ্জস্যের জন্য পরীক্ষা করার আগে এটি নিরাপদে লোড করতে পারেন।

বেমানান ব্রাউজার সহ ব্যবহারকারীদের জন্য বিভিন্ন অ্যাপ্লিকেশনের মাঝে মাঝে ভিন্ন আচরণের প্রয়োজন হয়। ট্রান্সলিটারেট এপিআই সামঞ্জস্য পরীক্ষা করার জন্য একটি বিশ্বব্যাপী পদ্ধতি google.elements.transliteration.isBrowserCompatible() প্রদান করে, কিন্তু যখন এটি একটি বেমানান ব্রাউজার শনাক্ত করে তখন এটির কোনো স্বয়ংক্রিয় আচরণ থাকে না। ব্যবহারযোগ্যতার উদ্দেশ্যে, আপনার বেমানান ব্রাউজার সনাক্ত করা উচিত এবং সনাক্ত করা হলে, একটি ত্রুটি বার্তা প্রদর্শন করা উচিত।

শ্রোতা

এই ডকুমেন্টেশনটি তাদের পৃষ্ঠা বা অ্যাপ্লিকেশনগুলিতে Google Transliterate কার্যকারিতা যোগ করতে চান এমন ডেভেলপারদের জন্য উদ্দিষ্ট৷

এইচটিএমএল কন্টেন্ট টাইপ

ট্রান্সলিটারেট এপিআই প্রচুর UTF-8 পাঠ্য পরিচালনা করে এবং তাই আপনাকে এই মেটা ট্যাগ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> যোগ করে আপনার পৃষ্ঠার content-type UTF-8-এ সেট করতে হবে <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> । এই মেটা ট্যাগ ছাড়া, ট্রান্সলিটারেট API সঠিকভাবে কাজ করবে না।

গুগল ট্রান্সলিটারেটের "হ্যালো ওয়ার্ল্ড"

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(['transliterateTextarea']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
    Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
    <textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
  </body>
</html>

শুরু হচ্ছে

JavaScript API লোড করুন

Transliterate API ব্যবহার শুরু করতে, আপনার ওয়েব পৃষ্ঠার শিরোনামে নিম্নলিখিত স্ক্রিপ্টটি অন্তর্ভুক্ত করুন।

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

এরপরে, google.load(module, version, package) সহ ট্রান্সলিটারেট API লোড করুন, যেখানে:

  • module কল করে যা আপনি আপনার পৃষ্ঠায় ব্যবহার করতে চান (এই ক্ষেত্রে, elements )।
  • version হল মডিউলটির সংস্করণ নম্বর যা আপনি লোড করতে চান (এই ক্ষেত্রে, 1 )।
  • package নির্দিষ্ট উপাদান প্যাকেজ নির্দিষ্ট করে যা আপনি লোড করতে চান, এই ক্ষেত্রে transliteration ।
<script type="text/javascript">
  google.load("elements", "1", {
  packages: "transliterate"
  });
</script>

আপনি Google লোডার বিকাশকারীর গাইডে google.load সম্পর্কে আরও জানতে পারেন।

যখন আমরা API-তে একটি উল্লেখযোগ্য আপডেট করি, তখন আমরা সংস্করণ সংখ্যা বৃদ্ধি করব এবং API আলোচনা গোষ্ঠীতে একটি বিজ্ঞপ্তি পোস্ট করব। যখন এটি ঘটে তখন যেকোন প্রয়োজনীয় কোড পরিবর্তনের কথা নোট করুন এবং আপনার URLগুলিকে নতুন সংস্করণে আপডেট করুন যখন সেগুলি মেনে চলে৷

Google API টিমও পর্যায়ক্রমে একটি সংস্করণ আপডেটের প্রয়োজন ছাড়াই সাম্প্রতিক বাগ সংশোধন এবং কর্মক্ষমতা বর্ধিতকরণ সহ API আপডেট করবে। বেশিরভাগ অংশের জন্য, এই সংশোধনগুলি আপনার কাছে স্বচ্ছ থাকা উচিত, তবে আমরা অসাবধানতাবশত কিছু API ক্লায়েন্ট ভেঙে ফেলতে পারি। অনুগ্রহ করে এই ধরনের সমস্যা রিপোর্ট করতে API আলোচনা গোষ্ঠী ব্যবহার করুন।

API ব্যবহার করে

নিম্নলিখিত বিভাগগুলি দেখায় কিভাবে আপনার ওয়েব পৃষ্ঠা বা অ্যাপ্লিকেশনে Google Transliterate API-কে অন্তর্ভুক্ত করতে হয়। এই API ব্যবহার করার জন্য একটি সার্ভারে একটি অ্যাসিঙ্ক্রোনাস কল প্রয়োজন, তাই ডেটা বিনিময় প্রক্রিয়া করার জন্য আপনার একটি কলব্যাক ফাংশন প্রয়োজন৷

সহজ প্রতিবর্ণীকরণ সম্পাদন করা হচ্ছে

google.language.transliterate(wordsArray, srcLang, destLang, callback) একটি বিশ্বব্যাপী পদ্ধতি যা উৎস ভাষা থেকে গন্তব্য ভাষায় প্রদত্ত পাঠ্যকে প্রতিবর্ণীকরণ করে। API result অবজেক্ট হিসাবে প্রদত্ত callback ফাংশনে অসিঙ্ক্রোনাসভাবে ফলাফল প্রদান করে। এই পদ্ধতির জন্য পরামিতি হল:

  • wordsArray একটি অ্যারে হিসাবে প্রতিবর্ণীকৃত করা পাঠ্য প্রদান করে।
  • srcLang একটি ভাষা কোড হিসাবে উৎস ভাষা প্রদান করে। উদাহরণের জন্য LanguageCode enum দেখুন।
  • destLang একটি ভাষা কোড হিসাবে গন্তব্য ভাষা প্রদান করে। উদাহরণের জন্য LanguageCode enum দেখুন।
  • callback হল কলব্যাক ফাংশন যা result গ্রহণ করে।

google.language.transliterate() এর কোনো রিটার্ন মান নেই।

ট্রান্সলিটারেশনের জন্য এই সরলীকৃত পদ্ধতিটি google.language.transliterate নেমস্পেস ব্যবহার করে (এবং google.elements.transliteration নয়, যা ট্রান্সলিটারেট এপিআই-এর অন্য প্রতিটি পদ্ধতির জন্য নামস্থান)।

google.language.transliterate() result অবজেক্টকে আউটপুট করে।

সার্ভারের অনুরোধের JSON এনকোডিং ব্যবহার করে ফলাফল বস্তু তৈরি করা হয়। ফলস্বরূপ, আমরা আনুষ্ঠানিক জাভাস্ক্রিপ্ট অবজেক্টগুলি বাস্তবায়ন না করা বেছে নিয়েছি এবং পরিবর্তে তাদের সিরিয়ালাইজড ফর্ম থেকে গতিশীলভাবে result বস্তু তৈরি করেছি।

বস্তুর কোনো আনুষ্ঠানিক বাস্তবায়ন না থাকলেও, সেগুলি বিদ্যমান, এবং আমরা সেগুলিকে নথিভুক্ত করি যেন একটি ব্যাকিং জাভাস্ক্রিপ্ট বাস্তবায়ন ছিল। এই সবের প্রভাব ন্যূনতম। এর অর্থ হল যে কোনও নামযুক্ত কনস্ট্রাক্টর নেই। প্রতিটি ফলাফলের জন্য, এটি এমন যেন সিস্টেমটি নতুন অবজেক্ট() বলে এবং তারপরে সেই বস্তুতে আনুষ্ঠানিক বৈশিষ্ট্য সেট করে। এই বৈশিষ্ট্যগুলি নীচে দেওয়া হল।

  • <ফলাফল>
    • error?
      ট্রান্সলিটারেশনে কোনো ত্রুটি থাকলে উপস্থাপন করুন।
    • transliterations
      ইনপুট wordsArray আকারের সমান আকারের অ্যারে অ্যারে।
      • transliteratedWords
        wordsArray এ সংশ্লিষ্ট শব্দের জন্য প্রতিবর্ণীকরণ সহ সর্বাধিক আকার 5 এর একটি অ্যারে।

এই উদাহরণটি দেখায় কিভাবে একটি জাভাস্ক্রিপ্ট স্ট্রিং ট্রান্সলিটারেট করা যায়:

//Load the Language API.
google.load("language", "1");

//Call google.language.transliterate() 
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
  if (!result.error) {
    var container = document.getElementById("transliteration");
    if (result.transliterations && result.transliterations.length > 0 &&
        result.transliterations[0].transliteratedWords.length > 0) {
      container.innerHTML = result.transliterations[0].transliteratedWords[0];
    }
  }
});

উদাহরণ দেখুন (transliterate.html)

প্রতিবর্ণীকরণ নিয়ন্ত্রণ সক্ষম করা হচ্ছে

.TransliterationControl(options) সম্পাদনাযোগ্য HTML DOM উপাদানগুলির একটি সেটে প্রতিবর্ণীকরণ সক্ষম করে এবং আপনাকে সেই উপাদানগুলিতে প্রতিবর্ণীকরণ নিয়ন্ত্রণ করার অনুমতি দিয়ে বেশ কয়েকটি পদ্ধতি সরবরাহ করে৷ options আর্গুমেন্টে নিম্নলিখিত ক্ষেত্র থাকতে পারে:

  • sourceLanguage হল একটি বাধ্যতামূলক স্ট্রিং যা LanguageCode enum ব্যবহার করে উৎস ভাষা নির্দিষ্ট করে (যেমন google.elements.transliteration. ENGLISH )। বর্তমানে, ইংরেজি একমাত্র সমর্থিত উৎস ভাষা।
  • destinationLanguage হল একটি বাধ্যতামূলক অ্যারে যা LanguageCode enum ব্যবহার করে গন্তব্যের ভাষা নির্দিষ্ট করে যেমন ( google.elements.transliteration. HINDI )।

    UI-তে, উপলভ্য গন্তব্য ভাষাগুলি মেনুতে প্রদর্শিত হয়, ডিফল্টরূপে নির্বাচিত অ্যারের প্রথম ভাষা সহ। একটি প্রদত্ত উৎস ভাষার জন্য বৈধ গন্তব্য ভাষা সম্পর্কিত আরও বিশদ বিবরণের জন্য অনুগ্রহ করে getDestinationLanguages ​​দেখুন।
  • transliterationEnabled সক্ষম করা একটি ঐচ্ছিক ক্ষেত্র যা ডিফল্টরূপে প্রতিবর্ণীকরণ সক্ষম করতে হবে কিনা তা নির্দিষ্ট করে। আপনি যদি ডিফল্টরূপে প্রতিবর্ণীকরণ সক্ষম করতে চান তবে true মান সহ এই ক্ষেত্রটি নির্দিষ্ট করুন। ডিফল্ট মান false ।
  • shortcutKey হল একটি ঐচ্ছিক স্ট্রিং ফিল্ড যা ট্রান্সলিটারেশন চালু বা বন্ধ করার জন্য একটি শর্টকাট কী নির্দিষ্ট করে। শর্টকাট কী নির্দিষ্ট করতে, একটি বর্ণানুক্রমিক অক্ষর সহ 'Ctrl', 'Alt' বা 'Shift'-এর মতো মডিফায়ার ধারণকারী একটি স্ট্রিং নির্দিষ্ট করুন। উদাহরণস্বরূপ, 'Ctrl+g' এবং 'Ctrl+Shift+a' উভয়ই বৈধ শর্টকাট কী সমন্বয়।

    দ্রষ্টব্য: আপনি শুধুমাত্র পরিবর্তনকারী হিসাবে Shift ব্যবহার করতে পারবেন না; যাইহোক, আপনি Alt বা Control এর সাথে এটি ব্যবহার করতে পারেন।

এই পদ্ধতিটি নিম্নলিখিত পরিস্থিতিতে ব্যতিক্রম তৈরি করে:

  • অবৈধ sourceLanguage বা destinationLanguage ভাষা
  • sourceLangauge এবং destinationLanguage ভাষার জোড়ায় অসমর্থিত ভাষা
  • অবৈধ শর্টকাটকি সমন্বয়

নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে প্রতিবর্ণীকরণ নিয়ন্ত্রণের একটি উদাহরণ তৈরি করতে হয়:

function onLoad() {
  var options = {
    sourceLanguage: 'en',
    destinationLanguage: ['hi'],
    shortcutKey: 'ctrl+g',
    transliterationEnabled: true
  };

  // Create an instance on TransliterationControl with the required
  // options.
  var control = new google.elements.transliteration.TransliterationControl(options);
}

একটি HTML নোডে প্রতিবর্ণীকরণ সক্ষম করা হচ্ছে

.makeTransliteratable(elementIds, opt_options) সরবরাহ করা HTML উপাদান(গুলি) তে প্রতিবর্ণীকরণ সক্ষম করে। এই পদ্ধতির জন্য পরামিতি হল:

  • elementIds হল একটি অ্যারে যাতে সম্পাদনাযোগ্য এলিমেন্ট আইডি বা উপাদানের রেফারেন্সের স্ট্রিং থাকে যার জন্য আপনি প্রতিবর্ণীকরণ সক্ষম করতে চান। একটি সম্পাদনাযোগ্য উপাদান হতে পারে:

    • একটি পাঠ্য ক্ষেত্র
    • একটি পাঠ্য এলাকা
    • contentEditable="true" সহ একটি <div>
    • designMode="on" সহ একটি <iframe>
    • contentEditable="true" বডি সহ একটি iFrame। প্রতিবর্ণীকরণ সক্ষম করার আগে iFrame লোড হয়েছে তা নিশ্চিত করুন৷
  • opt_options একটি ঐচ্ছিক যুক্তি যা এই উপাদানগুলিতে প্রয়োগ করা বিকল্পগুলি সরবরাহ করে। এই যুক্তিতে নিম্নলিখিত ক্ষেত্র থাকতে পারে:
    • adjustElementStyle হল একটি ঐচ্ছিক বুলিয়ান ক্ষেত্র যা নিয়ন্ত্রণ করে যে API স্বয়ংক্রিয়ভাবে এলিমেন্ট এবং ফন্টের মাপগুলিকে সর্বোত্তমভাবে লক্ষ্য ভাষার অক্ষরের সাথে মানানসই করে। ডিফল্ট মান true । এই বিকল্পটি শুধুমাত্র প্লেইন টেক্সট উপাদানগুলিকে প্রভাবিত করে।
    • adjustElementDirection হল একটি ঐচ্ছিক বুলিয়ান ক্ষেত্র যা destinationLanguage ভাষার দিকনির্দেশের উপর নির্ভর করে সম্পাদনাযোগ্য উপাদানের দিক নিয়ন্ত্রণ করে। ডিফল্ট মান true ।

আরবির মতো ডান-থেকে-বামে লেখার সিস্টেমের জন্য, API স্বয়ংক্রিয়ভাবে লিখিত স্ক্রিপ্টের দিকনির্দেশ এবং ইনপুট উপাদানের বিষয়বস্তু অনুসারে ইনপুট উপাদানের দিক সমন্বয় করে। আপনি দিকনির্দেশ সহ HTML এবং JavaScript ব্যবহার করে একটি ইনপুট উপাদানে পাঠ্যের direction সেট করতে পারেন, যার মান 'ltr' (বাম থেকে ডানে) বা 'rtl' (ডান থেকে বামে) থাকতে পারে। এই পদ্ধতিটি ব্যবহার করা ইনপুট এলাকায় পাঠ্যের কার্সার এবং প্রান্তিককরণকে প্রভাবিত করে।

আপনি আরবি প্রতিবর্ণীকরণ উদাহরণে ডান-থেকে-বাম ভাষার জন্য API-এর সমর্থনের একটি উদাহরণ দেখতে পারেন।

এই পদ্ধতিটি ব্যতিক্রম তৈরি করে যদি নির্দিষ্ট কোনো elementIds অবৈধ হয়।

.makeTransliteratable() এর কোনো রিটার্ন মান নেই।

নিম্নলিখিত কোড স্নিপেট এই পদ্ধতির একটি সাধারণ ব্যবহার প্রদর্শন করে:

var ids = [ "transl1", "transl2" ];
  control.makeTransliteratable(ids);

একটি DIV-তে প্রতিবর্ণীকরণ নিয়ন্ত্রণ দেখানো হচ্ছে

.showControl(divElement) নির্দিষ্ট DIV-তে প্রতিবর্ণীকরণ নিয়ন্ত্রণ দেখায়, যেখানে divElement হল DIV-এর আইডি। এই পদ্ধতির কোন রিটার্ন মান নেই।

নিম্নলিখিত কোড স্নিপেট এই পদ্ধতির একটি সাধারণ ব্যবহার প্রদর্শন করে:

control.showControl('translControl');
...
<div id="translControl">

প্রতিবর্ণীকরণ চালু করা হচ্ছে

.enableTransliteration() প্রতিবর্ণীকরণ নিয়ন্ত্রণে প্রতিবর্ণীকরণ সক্ষম করে। এই পদ্ধতিতে কোন যুক্তি নেই এবং কোন রিটার্ন মান নেই।

প্রতিবর্ণীকরণ বন্ধ করা হচ্ছে

.disableTransliteration() প্রতিবর্ণীকরণ নিয়ন্ত্রণে প্রতিবর্ণীকরণ নিষ্ক্রিয় করে। এই পদ্ধতিতে কোন যুক্তি নেই এবং কোন রিটার্ন মান নেই।

ট্রান্সলিটারেশন চালু বা বন্ধ করা হচ্ছে

.toggleTransliteration() ট্রান্সলিটারেশন নিয়ন্ত্রণে ট্রান্সলিটারেশন চালু বা বন্ধ করে। এই পদ্ধতিতে কোন যুক্তি নেই এবং কোন রিটার্ন মান নেই।

নিম্নলিখিত কোড স্নিপেট এই পদ্ধতির একটি সাধারণ ব্যবহার প্রদর্শন করে:

function checkboxClickHandler() {
  transliterationControl.toggleTransliteration();
  ...
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()">

প্রতিবর্ণীকরণের জন্য ভাষার জোড়া পরিবর্তন করা হচ্ছে

.setLanguagePair(sourceLanguage, destinationLanguage) আপনাকে ট্রান্সলিটারেশন কন্ট্রোল দ্বারা ব্যবহৃত ভাষার জোড়া পরিবর্তন করতে দেয়, যেখানে:

  • sourceLanguage ট্রান্সলিটারেট করা ভাষার ধরন প্রদান করে। এই যুক্তিটি LanguageCode enum থেকে এর মান নেয় (যেমন google.elements.transliteration.TransliterationControl. LanguageCode.ENGLISH) ।
  • destinationLanguage ট্রান্সলিটারেটেড টেক্সটের জন্য ভাষার ধরন প্রদান করে।

.setLanguagePair() setLanguage অ্যাকশন সফল হয়েছে কিনা তা নির্দেশ করে একটি বুলিয়ান প্রদান করে।

নিম্নলিখিত কোড স্নিপেট ড্রপ-ডাউন মেনুর মাধ্যমে প্রতিবর্ণীকরণ ভাষা পরিবর্তন করতে হ্যান্ডলারের মধ্যে এই পদ্ধতির ব্যবহার প্রদর্শন করে:

function languageChangeHandler() {
  var dropdown = document.getElementById('languageDropDown');
  transliterationControl.setLanguagePair(
    google.elements.transliteration.LanguageCode.ENGLISH,
    dropdown.options[dropdown.selectedIndex].value);
}
...
<select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>

বর্তমান ভাষা যুগল পুনরুদ্ধার করা হচ্ছে

.getLanguagePair() এর কোনো আর্গুমেন্ট নেই এবং sourceLanguage এবং destinationLanguage এর জন্য ক্ষেত্র সহ একটি অবজেক্ট হিসাবে ট্রান্সলিটারেশন নিয়ন্ত্রণের জন্য বর্তমান ভাষা জোড়া ফিরিয়ে দেয়।

প্রতিবর্ণীকরণ সক্ষম আছে কিনা তা সনাক্ত করা হচ্ছে

.isTransliterationEnabled() এর কোন আর্গুমেন্ট নেই এবং এটি একটি বুলিয়ান প্রদান করে যা নির্দেশ করে যে প্রতিবর্ণীকরণ নিয়ন্ত্রণে ট্রান্সলিটারেশন সক্ষম করা হয়েছে কিনা।

লিপ্যন্তর সক্রিয় করা থাকলে নিম্নলিখিত কোড স্নিপেট একটি চেকবক্স চেক করতে এই পদ্ধতি ব্যবহার করে:

// Set the checkbox to the correct state.
  document.getElementById('checkboxId').checked =
  transliterationControl.isTransliterationEnabled();
...
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>

প্রতিবর্ণীকরণ ইভেন্টের জন্য একজন শ্রোতা যোগ করা হচ্ছে

.addEventListener(eventType, listener, opt_listenerScope) নির্দিষ্ট ইভেন্ট প্রকারের জন্য প্রতিবর্ণীকরণ নিয়ন্ত্রণে একজন শ্রোতাকে যুক্ত করে। যখন নির্দিষ্ট ইভেন্ট টাইপটি ট্রিগার করা হয়, তখন শ্রোতাকে ইভেন্ট অবজেক্ট দিয়ে ডাকা হয়। ইভেন্ট অবজেক্টের বিষয়বস্তু ইভেন্টের ধরনের উপর নির্ভর করে। এই পদ্ধতির জন্য পরামিতি হল:

  • eventType হল সেই ইভেন্ট যার জন্য শ্রোতা যোগ করতে হবে। এই যুক্তিটি eventType থেকে এর মান নেয় (যেমন google.elements.transliteration.TransliterationControl. EventType.STATE_CHANGED) ।
  • listener ইভেন্টের জন্য একটি শ্রোতা ফাংশন প্রদান করে।
  • opt_listenerScope this সেট সহ শ্রোতাকে opt_listenerScope এ নির্দিষ্ট বস্তুতে কল করে।

.addEventListener() এর কোনো রিটার্ন মান নেই।

নিম্নোক্ত কোড স্নিপেট দেখায় যে সার্ভারটি নাগাল না হলে একটি ত্রুটি বার্তা প্রদর্শন করতে এই পদ্ধতিটি কীভাবে ব্যবহার করবেন:

transliterationControl.addEventListener(
  google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
            serverUnreachableHandler);

function serverUnreachableHandler(e) {
  document.getElementById("errorDiv").innerHTML =
  "Transliteration Server unreachable";
}            
...
<div id="errorDiv"></div>

প্রতিবর্ণীকরণ ইভেন্টের জন্য একজন শ্রোতাকে সরানো হচ্ছে

.removeEventListener(eventType, listener, opt_listenerScope) প্রতিবর্ণীকরণ নিয়ন্ত্রণ থেকে একটি ইভেন্ট শ্রোতাকে সরিয়ে দেয়, যেখানে:

  • এই যুক্তিটি eventType থেকে এর মান নেয় (যেমন google.elements.transliteration.TransliterationControl. EventType.STATE_CHANGED) ।
  • listener হল ইভেন্টের ফাংশন যা অপসারণ করতে হবে।
  • opt_listenerScope হল সেই সুযোগ যেখানে শ্রোতা যোগ করার সময় শ্রোতা নিবন্ধিত হয়েছিল।

.removeEventListener() এর কোনো রিটার্ন মান নেই।

নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে পূর্ববর্তী উদাহরণে তৈরি ইভেন্ট শ্রোতাকে সরাতে হয়:

transliterationControl.removeEventListener(
  google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE, serverUnreachableHandler);

দৃশ্যমান উপাদান কাস্টমাইজ করা

আপনি ডিফল্ট CSS ফাইলে সংজ্ঞায়িত ক্লাসগুলিকে প্রসারিত করতে showControl পদ্ধতি ব্যবহার করে প্রদর্শিত প্রতিবর্ণীকরণ নিয়ন্ত্রণকে স্টাইল করতে পারেন। API এই CSS ফাইলটিকে google.load() মাধ্যমে স্বয়ংক্রিয়ভাবে লোড করে। এই CSS ফাইলটি নিয়ন্ত্রণের শৈলী এবং ট্রান্সলিটারেশন সাজেশন মেনুকে সংজ্ঞায়িত করে যা আপনি যখন ট্রান্সলিটারেড শব্দে ক্লিক বা সম্পাদনা করেন তখন পপ আউট হয়। আপনি যদি ডিফল্ট CSS লোড করতে না চান, আপনি google.load কল করার সময় nocss true সেট করুন।

google.load("elements", "1", {packages: "transliteration", "nocss" : true});

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

অনলোড হ্যান্ডলারকে কল করা হচ্ছে

.setOnLoadCallback(callback) হল একটি স্ট্যাটিক ফাংশন যা নির্দিষ্ট হ্যান্ডলার ফাংশনটি রেজিস্টার করে কল করার জন্য এই কলটি লোড হওয়ার পরে, যেখানে callback একটি প্রয়োজনীয় ফাংশন বলা হয় যখন ডকুমেন্টটি লোড করা হয় এবং API ব্যবহারের জন্য প্রস্তুত থাকে (যেমন, পরে onLoad )। এই ফাংশনটি google নামস্থানে প্রয়োগ করা হয়েছে (যেমন, google.setOnLoadCallback(callback); )

.setOnLoadCallback() এর কোনো রিটার্ন মান নেই।

দ্রষ্টব্য: পূর্ববর্তী ডকুমেন্টেশনে সুপারিশ করা হয়েছে যে আপনি বডি এলিমেন্টের অনলোড অ্যাট্রিবিউট ( <body onload="OnLoad()"> ) ব্যবহার করুন। আপনি যখন পৃষ্ঠার সম্পূর্ণ নিয়ন্ত্রণে থাকবেন এবং পৃষ্ঠার সমস্ত কোড লোড হবে তখন এটি যাওয়ার একটি দুর্দান্ত উপায়, এই পদ্ধতিটি কিছু রানটাইম নিয়ে সমস্যা সৃষ্টি করতে পারে যা আপনার body.onload হ্যান্ডলারকে ধ্বংস করে। setOnLoadCallback() এর এই সমস্যাগুলি নেই, এবং সেইজন্য একটি কলব্যাক নিবন্ধন করার প্রস্তাবিত পদ্ধতি যা আপনার কোড কল করে যখন API সম্পূর্ণরূপে লোড হয় এবং ব্যবহারের জন্য প্রস্তুত হয়।

setOnLoadCallback google নামস্থানে প্রয়োগ করা হয়েছে:

google.setOnLoadCallback(function);

অতিরিক্ত পদ্ধতি কনফিগার করা হচ্ছে

উপরে তালিকাভুক্ত পদ্ধতিগুলি ছাড়াও, ট্রান্সলিটারেট API নিম্নলিখিত, বিশ্বব্যাপী পদ্ধতিগুলিও অফার করে যা আপনাকে আপনার অ্যাপ্লিকেশনগুলির ব্যবহারযোগ্যতা উন্নত করতে দেয়৷ এই পদ্ধতিগুলি google.elements.transliterate নামস্থানে তৈরি করা হয়েছে৷

বর্তমান ব্রাউজার ট্রান্সলিটারেশন সমর্থন করে কিনা তা সনাক্ত করা হচ্ছে

.isBrowserCompatible হল একটি বিশ্বব্যাপী পদ্ধতি যার কোনো আর্গুমেন্ট নেই যা ক্লায়েন্টের ব্রাউজারের জন্য প্রতিবর্ণীকরণ উপলব্ধ কিনা তা নির্দেশ করে একটি বুলিয়ান প্রদান করে।

নিম্নোক্ত কোড স্নিপেট দেখায় কিভাবে ট্রান্সলিটারেশনের জন্য ব্রাউজার সমর্থন সনাক্ত করতে হয়:

<textarea id="textarea"></textarea>
<div id="errorDiv"></div>

...
if (google.elements.transliteration.isBrowserCompatible()) {
  var transliterationControl = new google.elements.transliteration.TransliterationControl(
    'sourceLanguage': 'en',
    'destinationLanguage': ['hi']);
  transliterationControl.makeTransliteratable(['textarea']);
} else {
    document.getElementById('errorDiv').innerHTML = 'Sorry! Your browser does not support transliteration';
}

সমর্থিত প্রতিবর্ণীকরণ ভাষা খোঁজা

.getDestinationLanguages(sourceLanguage) একটি বিশ্বব্যাপী পদ্ধতি যা গন্তব্য ভাষার একটি মানচিত্র প্রদান করে যার জন্য প্রদত্ত sourceLanguage জন্য প্রতিবর্ণীকরণ সমর্থিত। প্রত্যাবর্তিত মানচিত্রে সমর্থিত গন্তব্য ভাষা রয়েছে, যেখানে কীটি হল ভাষার নাম এবং মান হল ভাষা কোড। প্রত্যাবর্তিত মানচিত্রটি LanguageCode enum- এ বর্ণিত মানচিত্রটির অনুরূপ।

নিম্নলিখিত কোড স্নিপেট এই পদ্ধতির ব্যবহার প্রদর্শন করে:

var supportedDestinationLanguages =
  google.elements.transliteration.getDestinationLanguages(google.elements.transliteration.LanguageCode.ENGLISH);

এনামস

ইভেন্ট টাইপ enum

google.elements.transliteration.TransliterationControl.EventType গণনা ট্রান্সলিটারেশনের সময় সম্ভাব্য ইভেন্টগুলির তালিকা করে৷ আপনি আপনার কোডে এই ইভেন্টগুলির জন্য কাস্টম হ্যান্ডলার প্রদান করতে পারেন।

var google.elements.transliteration.TransliterationControl.EventType = {
   STATE_CHANGED : 'state_changed',
   LANGUAGE_CHANGED : 'language_changed',
   SERVER_REACHABLE : 'server_reachable',
   SERVER_UNREACHABLE : 'server_unreachable'
};
  • google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED : এর মাধ্যমে প্রতিবর্ণীকরণ নিয়ন্ত্রণে প্রতিবর্ণীকরণ সক্ষম বা নিষ্ক্রিয় করা হলে ফলাফল
    • একটি শর্টকাট কী
    • enableTransliteration , disableTransliteration বা toggleTransliteration পদ্ধতিগুলি টগল করুন
    • শো কন্ট্রোল পদ্ধতি দ্বারা আঁকা showControl নিয়ন্ত্রণে একটি মাউস ক্লিক।
    শ্রোতার কাছে পাঠানো ইভেন্ট অবজেক্টটিতে ক্ষেত্র transliterationEnabled সক্রিয় রয়েছে। প্রতিবর্ণীকরণ ' on ' হলে এই ক্ষেত্রটি সত্য, অন্যথায় এটি মিথ্যা।
  • google.elements.transliteration.TransliterationControl.EventType.LANGUAGE_CHANGED : ট্রান্সলিটারেশন কন্ট্রোলে ট্রান্সলিটারেশন ল্যাংগুয়েজ পেয়ারের মাধ্যমে পরিবর্তন করা হলে ফলাফল:
    • setLanguagePair পদ্ধতি
    • শো কন্ট্রোল পদ্ধতি দ্বারা showControl প্রতিবর্ণীকরণ নিয়ন্ত্রণ
    শ্রোতার কাছে পাঠানো ইভেন্ট অবজেক্টে sourceLanguage এবং destinationLanguage ভাষা ক্ষেত্র রয়েছে।
  • google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE : আপনি যখন সফলভাবে টেক্সট ট্রান্সলিটারেট করতে সার্ভারের সাথে যোগাযোগ করেন তখন ফলাফল।
  • google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE পাঠ্য প্রতিবর্ণীকরণ করতে সার্ভারের সাথে যোগাযোগ করার ব্যর্থ প্রচেষ্টার ফলাফল।

ভাষা কোড enum

google.elements.transliteration.LanguageCode মানচিত্রের নামটি ভাষার কোডগুলির সাথে স্থির থাকে যা আপনি ট্রান্সলিটারেশন পদ্ধতিতে উত্স এবং গন্তব্য ভাষাগুলি নির্দিষ্ট করতে ব্যবহার করতে পারেন৷

var google.elements.transliteration.LanguageCode = {
    ENGLISH: 'en',
    AMHARIC: 'am',
    ARABIC: 'ar',
    BENGALI: 'bn',
    CHINESE: 'zh',
    GREEK: 'el',
    GUJARATI: 'gu',
    HINDI: 'hi',
    KANNADA: 'kn',
    MALAYALAM: 'ml',
    MARATHI: 'mr',
    NEPALI: 'ne',
    ORIYA: 'or',
    PERSIAN: 'fa',
    PUNJABI: 'pa',
    RUSSIAN: 'ru',
    SANSKRIT: 'sa',
    SINHALESE: 'si',
    SERBIAN: 'sr',
    TAMIL: 'ta',
    TELUGU: 'te',
    TIGRINYA: 'ti',
    URDU: 'ur'
};

সমর্থিত গন্তব্য ভাষা

google.elements.transliteration.SupportedDestinationLanguages ​​গণনা মানচিত্রের নাম ভাষার কোডের অ্যারেতে স্থির থাকে যা আপনি ট্রান্সলিটারেশন নিয়ন্ত্রণে গন্তব্য ভাষার গ্রুপ নির্দিষ্ট করতে ব্যবহার করতে পারেন।

var google.elements.transliteration.SupportedDestinationLanguages = {
    // ALL includes all languages supported in the Transliterate API.
    // As support for more languages becomes available, this enum will be
    // automatically updated to include the new languages transparently.
    ALL: [
        google.elements.transliteration.LanguageCode.AMHARIC,
        google.elements.transliteration.LanguageCode.ARABIC,
        google.elements.transliteration.LanguageCode.BENGALI,
        google.elements.transliteration.LanguageCode.CHINESE,
        google.elements.transliteration.LanguageCode.GREEK,
        google.elements.transliteration.LanguageCode.GUJARATI,
        google.elements.transliteration.LanguageCode.HINDI,
        google.elements.transliteration.LanguageCode.KANNADA,
        google.elements.transliteration.LanguageCode.MALAYALAM,
        google.elements.transliteration.LanguageCode.MARATHI,
        google.elements.transliteration.LanguageCode.NEPALI,
        google.elements.transliteration.LanguageCode.ORIYA,
        google.elements.transliteration.LanguageCode.PERSIAN,
        google.elements.transliteration.LanguageCode.PUNJABI,
        google.elements.transliteration.LanguageCode.RUSSIAN,
        google.elements.transliteration.LanguageCode.SANSKRIT,
        google.elements.transliteration.LanguageCode.SERBIAN,
        google.elements.transliteration.LanguageCode.SINHALESE,
        google.elements.transliteration.LanguageCode.TAMIL,
        google.elements.transliteration.LanguageCode.TELUGU,
        google.elements.transliteration.LanguageCode.TIGRINYA,
        google.elements.transliteration.LanguageCode.URDU],
 
    // INDIC includes all Indic languages supported in the Transliterate API.
    // As support for more Indic languages becomes available, this enum will be
    // automatically updated to include the new languages transparently.
    INDIC: [
        google.elements.transliteration.LanguageCode.BENGALI,
        google.elements.transliteration.LanguageCode.GUJARATI,
        google.elements.transliteration.LanguageCode.HINDI,
        google.elements.transliteration.LanguageCode.KANNADA,
        google.elements.transliteration.LanguageCode.MALAYALAM,
        google.elements.transliteration.LanguageCode.MARATHI,
        google.elements.transliteration.LanguageCode.NEPALI,
        google.elements.transliteration.LanguageCode.ORIYA,
        google.elements.transliteration.LanguageCode.PUNJABI,
        google.elements.transliteration.LanguageCode.SANSKRIT,
        google.elements.transliteration.LanguageCode.SINHALESE,
        google.elements.transliteration.LanguageCode.TAMIL,
        google.elements.transliteration.LanguageCode.TELUGU,
        google.elements.transliteration.LanguageCode.URDU]
};

উদাহরণ

সমৃদ্ধ পাঠ্য সম্পাদকে প্রতিবর্ণীকরণ

আপনি এমন সম্পাদকদের জন্য ট্রান্সলিটারেট ব্যবহার করতে পারেন যা সমৃদ্ধ পাঠ্য সম্পাদনা সমর্থন করে, যেমন একটি সম্পাদনাযোগ্য div বা iframe , বা ক্লোজার লাইব্রেরি বা Yahoo! UI লাইব্রেরি । নিম্নলিখিত নমুনা এই ব্যবহারের ক্ষেত্রে প্রদর্শন করে।

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <title>Transliteration in Rich Text Editor</title>
    <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the editable DIV with id
        // 'transliterateDiv'.
        control.makeTransliteratable(['transliterateDiv']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
    Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
    <div id="transliterateDiv" contenteditable="true" style="width:600px;height:200px;border:1px solid;overflow-y:scroll"></div>
  </body>
</html>

উদাহরণ দেখুন (richedittransliteration.html)

একক ভাষার সাথে প্রতিবর্ণীকরণ নিয়ন্ত্রণ

এই উদাহরণটি ইংরেজি এবং হিন্দি টাইপিং মোডগুলির মধ্যে স্যুইচ করার জন্য একটি নিয়ন্ত্রণ প্রদর্শন করে। এটি দুটি পাঠ্য ক্ষেত্রে প্রতিবর্ণীকরণ সক্ষম করে।

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
          sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
          destinationLanguage: ['hi'], // or [google.elements.transliteration.LanguageCode.HINDI],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };
        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  <center>Type in Hindi (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'></div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

উদাহরণ দেখুন (singlelangtransliteration.html)

একাধিক ভাষার সাথে ট্রান্সলিটারেট নিয়ন্ত্রণ

এই উদাহরণটি একটি নিয়ন্ত্রণ প্রদর্শন করে যা ব্যবহারকারীকে ব্যবহার করে গন্তব্য ভাষা চয়ন করতে দেয় destinationLanguage বিকল্পটি গন্তব্য ভাষার প্রারম্ভিক মান নির্দিষ্ট করতে এবং পৃষ্ঠায় সমর্থিত ভাষাগুলির তালিকাও করে। উদাহরণস্বরূপ, আপনি যদি আপনার পৃষ্ঠার ডিফল্ট গন্তব্য ভাষা তেলেগু হতে আগ্রহী হন এবং ভাষা ড্রপডাউন মেনুতে বিকল্প হিসাবে তামিল এবং মালয়ালম রাখতে আগ্রহী হন তবে আপনি ['te', 'ta', 'ml'] হিসাবে destinationLanguage ভাষা নির্দিষ্ট করতে পারেন ['te', 'ta', 'ml']

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['hi','kn','ml','ta','te'],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi and also choose other destination language.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);

    </script>
  </head>
  <body>
  <center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'></div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

উদাহরণ দেখুন (multilangtransliteration.html)

কাস্টম নিয়ন্ত্রণ সহ প্রতিবর্ণীকরণ

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      var transliterationControl;
      function onLoad() {
        var options = {
            sourceLanguage: 'en',
            destinationLanguage: ['ar','hi','kn','ml','ta','te'],
            transliterationEnabled: true,
            shortcutKey: 'ctrl+g'
        };
        // Create an instance on TransliterationControl with the required
        // options.
        transliterationControl =
          new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        transliterationControl.makeTransliteratable(ids);

        // Add the STATE_CHANGED event handler to correcly maintain the state
        // of the checkbox.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
            transliterateStateChangeHandler);

        // Add the SERVER_UNREACHABLE event handler to display an error message
        // if unable to reach the server.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
            serverUnreachableHandler);

        // Add the SERVER_REACHABLE event handler to remove the error message
        // once the server becomes reachable.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
            serverReachableHandler);

        // Set the checkbox to the correct state.
        document.getElementById('checkboxId').checked =
          transliterationControl.isTransliterationEnabled();

        // Populate the language dropdown
        var destinationLanguage =
          transliterationControl.getLanguagePair().destinationLanguage;
        var languageSelect = document.getElementById('languageDropDown');
        var supportedDestinationLanguages =
          google.elements.transliteration.getDestinationLanguages(
            google.elements.transliteration.LanguageCode.ENGLISH);
        for (var lang in supportedDestinationLanguages) {
          var opt = document.createElement('option');
          opt.text = lang;
          opt.value = supportedDestinationLanguages[lang];
          if (destinationLanguage == opt.value) {
            opt.selected = true;
          }
          try {
            languageSelect.add(opt, null);
          } catch (ex) {
            languageSelect.add(opt);
          }
        }
      }

      // Handler for STATE_CHANGED event which makes sure checkbox status
      // reflects the transliteration enabled or disabled status.
      function transliterateStateChangeHandler(e) {
        document.getElementById('checkboxId').checked = e.transliterationEnabled;
      }

      // Handler for checkbox's click event.  Calls toggleTransliteration to toggle
      // the transliteration state.
      function checkboxClickHandler() {
        transliterationControl.toggleTransliteration();
      }

      // Handler for dropdown option change event.  Calls setLanguagePair to
      // set the new language.
      function languageChangeHandler() {
        var dropdown = document.getElementById('languageDropDown');
        transliterationControl.setLanguagePair(
            google.elements.transliteration.LanguageCode.ENGLISH,
            dropdown.options[dropdown.selectedIndex].value);
      }

      // SERVER_UNREACHABLE event handler which displays the error message.
      function serverUnreachableHandler(e) {
        document.getElementById("errorDiv").innerHTML =
            "Transliteration Server unreachable";
      }

      // SERVER_UNREACHABLE event handler which clears the error message.
      function serverReachableHandler(e) {
        document.getElementById("errorDiv").innerHTML = "";
      }
      google.setOnLoadCallback(onLoad);

    </script>
  </head>
  <body>
  <center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'>
      <input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
      Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
    </div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
    <br><div id="errorDiv"></div>
  </body>
</html>

উদাহরণ দেখুন (customtransliteration.html)

সমস্যা সমাধান

আপনি যদি সমস্যার সম্মুখীন হন:

  • টাইপোর জন্য দেখুন. মনে রাখবেন জাভাস্ক্রিপ্ট একটি কেস-সংবেদনশীল ভাষা।
  • একটি জাভাস্ক্রিপ্ট ডিবাগার ব্যবহার করুন। গুগল ক্রোমের বিকাশকারী সরঞ্জামগুলির একটি সম্পূর্ণ সেট রয়েছে। ফায়ারফক্সে, আপনি JavaScript কনসোল বা Firebug ব্যবহার করতে পারেন। IE-তে, আপনি Microsoft Script Debugger ব্যবহার করতে পারেন।
  • আলোচনা গোষ্ঠী অনুসন্ধান করুন. আপনি যদি এমন কোনো পোস্ট খুঁজে না পান যা আপনার প্রশ্নের উত্তর দেয়, তাহলে সমস্যাটি প্রদর্শন করে এমন একটি ওয়েব পৃষ্ঠার লিঙ্ক সহ গ্রুপে আপনার প্রশ্ন পোস্ট করুন।