Skip to content

Latest commit

 

History

History
92 lines (68 loc) · 4.05 KB

translations.md

File metadata and controls

92 lines (68 loc) · 4.05 KB
Raw

Translations Guidelines

How to contribute with Translations for p5 web editor

General rules of thumb for translations

In order to simplify the translations process the following rules of thumb were used:

Technical Part

  • There is only one file to translate all the texts in any specific language, which is located under the directory, in the respective locale subdirectory
  • The new language code must be added to client/i18n.js
  • New languages will need to be selected using a dropdown in the Nav component, specifically in function renderLanguageMenu.
  • Need to add TRANSLATIONS_ENABLED=true to .env to activate the dropdown for the languages.

Nav.js

Need to add the following code to add a new language as a dropdown menu.

<li className="nav__dropdown-item">
   <button
      onFocus={this.handleFocusForLang}
      onBlur={this.handleBlur}
      value="newLanguageValue"
      onClick={e => this.handleLangSelection(e)}
   >
      new language name in the new language ex: 日本語 (Japanese)
   </button>
</li>

i18n.js

In terms of i18n.js, you will need to update 2 things. One is to import a new language from date-fns/locale. The other is to add a new language to languageMap.

import { enUS, es, ja, newLanguage } from 'date-fns/locale';
const availableLanguages = ['en-US', 'es-419', 'ja', 'newLanguage'];
export function languageKeyToDateLocale(lang) {
  const languageMap = {
    'en-US': enUS,
    'es-419': es,
    'ja': ja,
    'newLanguage': newLanguage
  };
  return languageMap[lang];
}

Translations

  • Every component should introduce its own subset of keys inside a dictionary named after the component. For instance: If you want to translate AssetList.jsx you need to introduce the following namespace in translations.json :
 "AssetList": {
    "Title": "p5.js Web Editor | My assets",
    "ToggleOpenCloseARIA": "Toggle Open/Close Asset Options",
    "OpenNewTab": "Open in New Tab",
    "HeaderName": "Name",
  }
  • There are common texts that are present with Common prefix, try to check first if the exact label is already present there.
  • Every key follows PascalCase case style.
  • Every key that is used in an ARIA text should end with the suffix ARIA.
  • The order of keys inside of appearance should be ordered in the order they appear in the source code

Language Use

The Processing Foundation is specifically invested in expanding the communities of technology and the arts to include and support those who have not had equal access because of their race, gender, class, sexuality, and/or disability. We see software as a medium, something that connects two things. We view it as a means for thinking and making. We believe software, and the tools to learn it, should be accessible to everyone

With those principles in mind, we want to strongly suggest the use of non-gendered terms whenever possible. If it is not possible to avoid, use the most inclusive version. For instance, in Spanish translation we tackled that problem with a particular rule of thumb: Avoid male-gendered words: use instead the letter ‘e’. We used the ‘e’ approach vs other approaches like ‘x’ or ‘@’ because you also need to think about how screen readers would read the text aloud.

Background

Did you want to know the context?

Thanks!

P5.js Web Editor Community