Voluntari.ly is Multilingual

The Voluntari.ly application is intended to be Open Source and available to people like us around the world.  This means it not only has to support NZ Official languages like English and Te reo Māori,  but potentially French, Chinese etc. 

This is made possible by the Internationalisation (I18N) and Localisation (L10N) features of the code base.  From the start we will support both EN and MI translations. 

If you are new to I18N then read this: https://formatjs.io/guides/basic-i18n/

Often direct translations don’t make sense as the words appear on the screen in the context of layout and images that give more context.

So we have two challenges.

  1. To find good meaningful words for some of the key concepts in the application. We are still struggling to find the best words in English too.
  2. To translate the many titles, labels and fields that appear on the forms on the website

The key concepts

Volunteer.

Someone who puts up their hand to help.  They may accept a call, or attend an event.

If there is no direct translation consider ideas such as: one who steps forward, a hero or warrior, a brave person. a person who takes a chance or steps up, or someone who joins a hunting or exploring party.

Opportunity.

This is the flip side of a volunteer - the person or group asking for help. We're not completely satisfied with the English for this concept. 

A request put out by someone needing help.  A chance to help someone. A need, or asking for support

Someone asking for help at an event or someone they can ask for advice or teaching.

Every opportunity needs volunteers, and volunteers need opportunities

Not every opportunity provider is a teacher although many will be.

Activity

Something to do, learn or teach. The thing that takes place when the Volunteer works on the Opportunity. 

What OMGTech provides to schools.

What content providers provide.


These three form the three sides of the Voluntarily triangle.  Our role is to bring together Volunteers to meet the opportunities to help provided using the activities available.

Person

Non gender specific term that includes volunteers, teachers, admin and support

Any person with an account on the system.

We do not use the term 'user'. 

People take on roles of volunteer or administrator or teacher etc. 

Organization

Catchall term for:

Opportunity providers - schools, communities etc. 

Volunteer providers - businesses, corporates

Activity/Content providers - OMGTech etc.

An organisation is made up of several people,  A person can belong to more than one organisation. 


Verbs and Labels

The Voluntarily web application is mostly made up of lists and forms.  Lists of all the above entitites. and forms to Create, Read, Update and Delete those entities. 

So on each form or view we will need labels for each item of data we collect to create an instance of an activity, opportunity etc.  

And on most forms we will have key Verbs:

Add|Create New,

Edit|Update,

Search,

Remove|Delete. 

plus buttons like Submit|Save & Cancel.


To build the translation we will create a JSON text file like this:

export default {
  locale: 'en',
  messages: {
    // header labels
    siteTitle: 'Voluntari.ly',
    // menu labels
    switchLanguage: 'Switch Language',

    // general buttons
    submit: 'Submit',
    cancel: 'Cancel',

    // post actions
    createNewPost: 'Create new post',
    addPost: 'Add Post',
    deletePost: 'Delete Post',
    // post field labels
    twitterMessage: 'We are on Twitter',
    by: 'By',
    authorName: 'Author\'s Name',
    postTitle: 'Post Title',
    postContent: 'Post Content',
    comment: `user {name} {value, plural,
    	  =0 {does not have any comments}
    	  =1 {has # comment}
    	  other {has # comments}
    	}`,
    HTMLComment: `user <b style='font-weight: bold'>{name} </b> {value, plural,
    	  =0 {does not have <i style='font-style: italic'>any</i> comments}
    	  =1 {has <i style='font-style: italic'>#</i> comment}
    	  other {has <i style='font-style: italic'>#</i> comments}
    	}`,
    nestedDateComment: `user {name} {value, plural,
    	  =0 {does not have any comments}
    	  =1 {has # comment}
    	  other {has # comments}
    	} as of {date}`,

    // org field labels
    orgName: 'Organisation Name',
    orgAbout: 'About Organisation',

    // org actions
    createNewOrg: 'Create new organisation',
    addOrg: 'Add Org',
    deleteOrg: 'Delete organisation',

    // Op list page
    opportunities: 'Opportunities',

    // op field labels
    opName: 'Title',
    opAbout: 'Description ',

    // op actions
    createNewOp: 'Create new Opportunity',
    addOp: 'New Opportunity',
    deleteOp: 'Delete Opportunity',

    // act field labels
    actName: 'Title',
    actAbout: 'Description ',

    // op actions
    createNewAct: 'Create new activity',
    addAct: 'New activity',
    deleteAct: 'Delete activity',

    // person actions
    createNewPerson: 'Create new person',
    addPerson: 'Add Person',
    deletePerson: 'Delete Person',
    // person field labels
    personName: 'Name',
    personEmail: 'Email',
    personRole: 'Role',

  },
};

Each item is a key: 'value',  pair. 

The first word on each row is the 'key' by which words are referenced inside the application - these should not change.

The second word in single quotes is the translation - into English, Māori or anything else.  One file for each language. 

The file will grow as the application grows. 


Coding for Translations

Developers should replace any strings used by the web client as follows

<li>Switch Language</li>
becomes
<li><FormattedMessage id="switchLanguage" /></li>



and add
switchLanguage: 'Switch Language', // en

to en.js and mi.js.  at the same point in the file. 

Translators will then be able to review the mi.js file and change any // en terms. and will then delete the // en comment.