https://github.com/kt3k/t10

:globe_with_meridians: Translation (t10) for browser
https://github.com/kt3k/t10

browser i18n javascript language translate

Last synced: 3 months ago
JSON representation

:globe_with_meridians: Translation (t10) for browser

• Host: GitHub
• URL: https://github.com/kt3k/t10
• Owner: kt3k
• License: mit
• Created: 2014-07-28T22:06:32.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-05-31T01:01:28.000Z (over 4 years ago)
• Last Synced: 2024-05-01T22:59:21.829Z (9 months ago)
• Topics: browser, i18n, javascript, language, translate
• Language: JavaScript
• Homepage: https://npm.im/t10
• Size: 272 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# t10 v1.0.2

> Translation for browser, 642B minified+gzipped

[![CircleCI](https://circleci.com/gh/kt3k/t10.svg?style=svg)](https://circleci.com/gh/kt3k/t10)

[![codecov](https://codecov.io/gh/kt3k/t10/branch/master/graph/badge.svg)](https://codecov.io/gh/kt3k/t10)

[![Greenkeeper badge](https://badges.greenkeeper.io/kt3k/t10.svg)](https://greenkeeper.io/)

## Usage

First, load the [script](https://unpkg.com/t10/dist/t10.js):

```html

```

Second, set the translation resource:

```javascript

t10.setResource({

  id_foo: 'Translated foo!',

  id_bar: 'Translated bar!',

  id_baz: 'Translated baz!'

});

```

Finally, perform the translation:

```javascript

t10.scan();

```

That's it. This performs the translation on the entire page synchronously.

With the above call the following html:

```html



  id_foo

  id_bar

  



```


Changes in to:

```html



  Translated foo!

  Translated bar!

  



```


---

Alternatively you can use via npm.

First install t10 locally:

    npm i t10

Then require / import it and use it:

```js

const t10 = require('t10');

```

or:

```js

import * as t10 from require('t10');

```

The rest is the same.

## What *t10.scan()* translates

### *t* tag

```html

...str_id...

```

translated into:

```html

...translated str_id...

```

### *.t-text* class

```html

str_id

```

translated into:

```html

translated str_id

```

### *.t-attr* class

```html

```

translated into:

```html

```

# Hide untranslated elements

You can hide untranslated elements by the following style:

```css

t, .t-text, .t-attr {

    visibility: hidden;

}

```

**Note**: `t` tag and `.t-text`, `.t-attr` classes are going to be removed after the translation.

# Select the best fit language from available list

### Basic Usage

```javascript

t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage('ja'); // => 'ja'

t10.setAvailables(['en', 'fr', 'ja']).getBestLanuuage('de'); // => 'en' # the first available is the default

t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage('en.US'); // => 'en'

t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage('ja.JP'); // => 'ja'

```

### Typical Usage

```javascript

var language = t10.setAvailables(['en', 'fr', 'ja']).getBestLanguage(getFromSystem());

$.getScript('path/to/resource/' + language + '.js').then(function () {

    t10.scan();

});

```

# Translate

`t` function translates a single key.

```

t10.setResource({pen: 'ペン'});

t10.t('pen'); // => ペン

```

# Dependency

- None

# License

MIT License (Yoshiya Hinosawa)