https://github.com/kt3k/t10
:globe_with_meridians: Translation (t10) for browser
https://github.com/kt3k/t10
browser i18n javascript language translate
Last synced: 8 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 11 years ago)
- Default Branch: master
- Last Pushed: 2020-05-31T01:01:28.000Z (over 5 years ago)
- Last Synced: 2024-05-01T22:59:21.829Z (over 1 year 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
[](https://circleci.com/gh/kt3k/t10)
[](https://codecov.io/gh/kt3k/t10)
[](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)