Localization, overnight.

Introduction

Getting started with Bablic is quite easy, as you’ll find out in a minute. It is also why we are so excited about it; We’ve taken upon ourselves the ambitious goal to make the web accessible in a disruptive way, and for that we’ve devised a very easy way to localize your site in a click. Just follow this getting started section to make your website accessible to any audience, anywhere.

The basic Bablic setup constitutes signing up for the service, pasting Bablic’s client javascript code into your front end pages, and voila! You’re done setting up for sustainable, all around accessible localization for your web site, while providing an easy and fun interface for your translators.

Getting Started

The first thing need you need to do is obtain a Bablic Snippet for your site from here , following this steps:

  • Log-in or Register.
  • Fill in your site details ( base url*, original language), and select your desired localized languages.
  • You'll be redirect to your translation management console, there you'll find your site's snippet.

Congratulations! Your site is now Bablic enabled. This means that Bablic will collect un-localized text items from your site every time a user visits the site, allowing you to freely update your site’s content with localized text- through Bablic’s easy to use backoffice translation interface. After the content is collected (this will normally happen after the first visit to your site once it becomes Bablic enabled) you can start editing translations.

  • Note, that you should specify the absolute exact URL you want Bablic to enable translation for. For example, if you’re content is accessible only through www.domain.tld, don’t leave it just as domain.tld- unless you have a redirect. If you don’t, “Review on your Site” will not work and you’ll get an browsing error.
  • Avoiding “naked” domains (i.e. example.com) is a good practice, to read more about it: https://devcenter.heroku.com/articles/avoiding-naked-domains-dns-arecords

Editing Translations

Review on your site

  • On the backoffice site, click “Pages”.
  • You can view a list of all detected pages.
  • Click one of the Edit icon of one of your pages and you will be redirected to your site, plus, you should see the Bablic Bubble# above your site.
  • Click the content you wish to review. You can also iterate over contents using the arrows button, or using the search field
  • After changing the translation for a text item, click 'correct' to save your changes.

  • To navigate within your site click on the minimize button of the bubble. It will be minimized to left side so you can reopen it anytime. To finish the editing mode, click the close button.

Review on list

To see all translation is list mode click on the List icon on the pages list

Developer API

The Bablic Developer API enables a website developer to configure the site localization, for example: control which sections of a page should be ignored, use Bablic gettext function to localize strings programmatically or listen to Bablic generated events.

Bablic HTML Markup

Bablic markup is html attributes you can use in your site HTML to configure bablic behaviour on your site.

Exclude/Include

Control which elements will be translated and which will be ignored. Ignoring elements is important if you have dynamic text from your DB which is to big for translation, if a page contains private or secure text or if you simply decide not to translate a specific phrase.

bablic-exclude Bablic will ignore text in all elements that have this attribute.

<span bablic-exclude> This text SHOULD NOT be translated </span>

bablic-include Bablic will translate elements that have this attribute even if they are inside an excluded element.

<div bablic-exclude>
     This text SHOULD NOT translate
     <span bablic-include>This text SHOULD translate</span>
</div>
  • For every text item the closest ancestor include/exclude attribute will be the decisive one
  • It is a common practice to put an exclude attribute on the body element, and add include only on specific elements, in order to control the text being translated on your own.
  • All Bablic markup attributes support the prefix ‘data-’, in addition to their original name.

Phrase

bablic-phrase Explicitly define an element inner html as one phrase. Phrase can include HTML tags.

<span bablic-phrase>
     This text should be <strong>one</strong> phrase
</span>

You can mark an internal part of the phrase as excluded. In the extracted phrase this part will be a variable.

Both
<span bablic-phrase>
     My favorite color is <span data-bablic-exclude>blue</span>, like your eyes
</span>
And
<span bablic-phrase>
     My favorite color is <!-- bablic exclude -->blue<!-- /bablic -->, like your eyes
</span>
Will be sent to translation as
My favorite color is {0}, like your eyes

Bidirectional turn on/off

When Bablic transform a web page direction, it performs the transformation on each element. By default, all elements which are translated are also transformed. You can control explicitly which element will be transformed and which not using the "bidi" attribute.

bablic-bidi Explicitly define an if the element should be transformed or not.

<div bablic-bidi="false">
     This element will not be transformed
     <span bablic-bidi="true"> This text will be transformed </span>
</div>

Comment Tags

You can use HTML comment tags to mark scopes which don't contained under a single element. The comment tag should start with the prefix 'bablic'. To close the scope use a comment tag with '/bablic'. All markup attributes in the comment tag require no prefixes:

<div data-bablic-exclude >
     This element will not be translated
     <!-- bablic    include    bidi="false"    -->
           This text will be translated, with no bidirectional support,
     <!-- /bablic -->
</div>
  • Comment tags do NOT support phrase markup. A phrase must be contained inside a single Node

Javascript API

Bablic JS API enables you to programmatically get the current locale, redirect to another locale, process new element explicitly, configure the flags widget and listen to bablic events.

  • All the JS API methods are available on the 'bablic' object, that is initialized after the snippet. Some methods that require localization data (like getLocale, __ ) are only available after the bablic 'done' event. See Event Handlers section.

getLocale() returns the current locale code ('en','ch','es_ar'...)

getLink(locale) returns the URI of the current web page with the given locale

redirectTo(locale) redirects the current page to the given locale.

processElement(domElement) explicitly tell Bablic process & translate the given element.

__(text, ..) returns the localized text. Supports format templates

bablic.__(‘You have a message from %s’,’Shila’)
bablic.__(‘Do you want {0} and {1}, {0} and {2} or just {0}?’, ‘Bacon’, ‘Ham’,’Cheese’)

__n(single_text, plural_text, count, ..) returns the localized string according the the right plural state.

var n = 3;
bablic.__n(‘You have a new message from %s’, ‘You have %d new messages from %s’,n,’Shila’)

markup(key,selector | domNode | jquery object,value) Markups the selected elements with the key and value, (same as using the HTML markup).

bablic.markup('phrase','p.message',true);
bablic.markup('exclude',document.getElementById('menu'),true);
bablic.markup('bidi',$('p.message'),false);

exclude(selector | domNode | jquery object) excludes the elements from translation, (same as using the markup() method)

bablic.exclude('#menu .message');
bablic.exclude(document.getElementById('menu');
bablic.exclude($('#menu .message'));

include(selector | domNode | jquery object) includes the elements for translation.

bablic.exclude('#menu');
bablic.include('#menu .message');

Languages Widget Placement

If you're using Bablic Customized Language Widget inside your site, but you wish to place the widget on a different element in each web-page, you can do so in Bablic code snippet.

Simply set the placeholder CSS selector in bablic.target_element

<!-- start Bablic -->
<script type='text/javascript'>
      var bablic=bablic||{};bablic.Site="4fec1e8656d5ca01000000b0";
      bablic.target_element = '#header';
</script>
<script type='text/javascript' src='//api.bablic.com/js/bablic.js'></script>
<!-- end Bablic -->

Event Handling

Events

load Triggered when Bablic library has loaded.

done Triggered when Bablic done translating the page.

error Triggered when Bablic had translation failed on any reason.

click Triggered when user clicks the language widget, before any redirection is applied.
Returning 'false' will cancel the redirection.

change Triggered when the user changes the locale, using the language widget, after the 'click' event is fired, before any redirection is applied.
Returning 'false' will cancel the redirection.


Listening To Events

There are two ways of listening to Bablic events:

Bablic object

bablic.on('load',function() {
     alert(“loaded”);
});

bablic.on('done',function(){
     FB.share(bablic.__('You gotta see this'));
});

DOM Events All Bablic events are triggered on the DOM document object with the prefix 'bablic';

Native
document.addEventListener(‘bablicload’,function() {
     alert(“loaded”);
});
jQuery
$(document).on(‘bablicload’,function() {
     alert(“loaded”);
});

Extensions

Heroku Add-on

Coming soon at https://addons.heroku.com/bablic

Ruby Example

NodeJS Example

Django Example

Joomla Extension

download
Coming soon at Joomla directory

WordPress

download
Published on WordPress Directory

Drupal

download
Coming soon at Drupal

jQuery

Coming soon