Create tutorial page and background material text in Hebrew

S0AndS0 commented 4 years ago

I've been doing a bit of research for another project and ran across an excellent guide for injecting a Google Translate drop-down within existing web-pages...

https://www.w3schools.com/howto/howto_google_translate.asp

English example page...

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>English example page</title>
  </head>

  <body>
    <div id="translate_selection"></div>

    <div class="content">
      <p>Something written for Google to translate</p>
      <p>Another paragraph written for translation.</p>
    </div>

    <script type="text/javascript">
      function google_translate_callback() {
        new google.translate.TranslateElement(
          {pageLanguage: "en"},
          "translate_selection"
        );
      }
    </script>

    <script
        type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=google_translate_callback"
      ></script>
  </body>
</html>

Hebrew example page...

<!DOCTYPE html>
<html lang="he" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hebrew example page</title>
  </head>

  <body>
    <div id="translate_selection"></div>

    <div class="content">
      <p>משהו שנכתב לגוגל לתרגם</p>
      <p>פיסקה נוספת שנכתבה לתרגום.</p>
    </div>

    <script type="text/javascript">
      function google_translate_callback() {
        new google.translate.TranslateElement(
          {pageLanguage: "he"},
          "translate_selection"
        );
      }
    </script>

    <script
        type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=google_translate_callback"
      ></script>
  </body>
</html>

Note, I wasn't clever enough to figure out how to get copy/paste to write in the correct direction for the above example.

... utilizing Google Translate should enable reading pages regardless of the original language or the reader's preference.

oferb commented 4 years ago

Thanks! We know Hebrew so we have a better "Google Translate" in our heads :) Could be a good starting point though..

S0AndS0 commented 4 years ago

Welcome as always. Suggestions of adding Google Translate is for those that do not have such skills, for example someone who reads/writes Spanish, and/or Japanese, etc. While automatically translated pages won't get everything correct, that's not an expectation, it would at least improve accessibility regardless of what language the page was originally written in.

Such functionality can be partially automated via {Type/Java}Script too...

const preferred_language_code: String = (
  window.navigator.userLanguage || window.navigator.language
).split('-')[0];

const translation_selector: HTMLSelectElement = document.getElementById('translate_selection').getElementsByTagName('select')[0];

for (let i = 0; i < translation_selector.options.length; i++) {
  if (translation_selector.options[i].value === preferred_language_code) {
    translation_selector.options.selectedIndex = i;
    translation_selector.dispatchEvent(new Event('change', { 'bubbles': true }));
    break;
  }
}

... for completeness, here's a full example with a button for semi-automated translation...

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>English example page</title>
  </head>

  <body>
    <div id="translate_selection"></div>

    <input
      type="button"
      name="auto-translate"
      value="auto
      translate"
      onclick="auto_select_translation();">

    <div class="content">
      <p>Something written for Google to translate</p>
      <p>Another paragraph written for translation.</p>
    </div>

    <script type="text/javascript">
      function google_translate_callback() {
        new google.translate.TranslateElement(
          {pageLanguage: "en"},
          "translate_selection"
        );
      }
    </script>

    <script
        type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=google_translate_callback"
      ></script>

    <script type="text/javascript">
      function auto_select_translation() {
        const preferred_language_code = (
          window.navigator.userLanguage || window.navigator.language
        ).split('-')[0];

        const translation_selector = document.getElementById(
          'translate_selection'
        ).getElementsByTagName(
          'select'
        )[0];

        for (let i = 0; i < translation_selector.options.length; i++) {
          if (translation_selector.options[i].value === preferred_language_code) {
            translation_selector.options.selectedIndex = i;
            translation_selector.dispatchEvent(new Event('change', { 'bubbles': true }));
            break;
          }
        }
      }
    </script>
  </body>
</html>

... above example could be fully automated by adding an event listener for when the page is fully loaded that compares browser preferred language to the page default language and if necessary triggers the auto_select_translation function.

Attribution

BitanTomer commented 4 years ago

It is still relevant?

oferb commented 4 years ago

Yes, you can be in contact with Mohammad on which page should be translated.

On Sun, 5 Apr 2020 at 17:39, Tomer Bitan notifications@github.com wrote:

It is still relevant?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hasadna/sensory-interface/issues/43#issuecomment-609426464, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHGKB3WNSGBXZVYPRAFWKDRLCJ2RANCNFSM4KYRRLLA .

oferb commented 4 years ago

Here's a translation of the braille tutorial:

תרגול לשימוש בברייל במערכת Sensory interface.docx

hasadna / accessible-graphs

Create tutorial page and background material text in Hebrew #43

Attribution