HTML Markup

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

Exclude/include, Hide Elements, No-Vars, Block, Phrase, Unique Phrase, Bablic ID, Comment Tags

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.
If you don't have access to the HTML itself, but you do know how to identify the elements to be excluded using CSS selectors, you should use The exclude API

Hide Elements

You can use the class "bablic-hide-all" to hide element in all translated languages or "bablic-hide-{locale code}" to hide elements only in a specific language. Usually it's best to also add the "bablic-exclude" attribute on elements that are hidden in all languages

class="bablic-hide-all" Bablic will hide this element in all translated languages. It's recommended to also add "bablic-exclude" attribute to those elements.

<span class="bablic-hide-all" bablic-exclude> This text will not show on all translated languages </span>

class="bablic-hide-{locale code}" Bablic will hide this element in that specific language.

<div class="bablic-hide-fr" > This element will be hidden only on French </div>

No-Vars

bablic-no-vars Tell Bablic not to capture variables. Usually Bablic will capture numbers, dates, times, URLs, email addresses, phone numbers and more, as variables, so that content will not be a part of the translation.
By using this markup you disable this functionality, so the variable text will be a part of the translation as any text.

Normally, this element:
<span> We are number 1! </span>
Will be translated as:
We are number {0}!

With the No-Vars markup:
<span bablic-no-vars> We are number 1! </span>
It will be translated as:
We are number 1!

Block

bablic-block Tell Bablic to capture this element is a single block, containing inner tags. Bablic detects blocks by itself, but this attribute will override its decision. You cannot use this attribute recursively, no blocked element inside another blocked element.

Normally, this element contains 2 blocks:
<div> <p> First paragraph </p> <p> Second paragraph </p> </div>
First paragraph and Second paragraph.

With the Block markup:
<div bablic-block> <p> First paragraph </p> <p> Second paragraph </p> </div>
It will translated as a single block:
<p1>First paragraph</p1><p2>Second paragraph</p2>

An element that usually have no formatting to it:
<span bablic-block> Regular text </span>
Can now be formatted with HTML tags:

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 blue, like your eyes </span> Will be sent to translation as My favorite color is {0}, like your eyes

Unique Phrase

bablic-unique is used to set a text phrase as unique, so that it's translation will be independent of other phrases that have the same text. This attribute requires a value that will represent the unique string for this phrase

Those 2 exact phrases will be translated independently

<p bablic-unique="hello world1"> Hello world </p> And <p bablic-unique="hello world2"> Hello world </p>

Bablic ID

bablic-id is used to retain an exiting translation for an element that was changed, or going to be changed. Usually when changing the content on an element, Bablic will recognize it as new element, and will require a new translation. If you wish to keep the translation for an element, but change it's original text, you can add this attribute to tell Bablic this element is still the same old element it was before.

To achieve this you first must get this element bablic id. You can do it by downloading the translation file from your Dashboard -> Pages -> Options -> Export (You can export to any language or format)
Each element in the downloaded file will have a unique id. Locate your text element and copy its ID
Now that you have the text element id, you can edit your HTML to add this attribute

<p bablic-id="0BQ5dF7ZUxsmEIQ040ykrGKihT0="> Text that I'm going to change in the original html file </p>

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  This text will be translated,  </div>

Comment tags do NOT support phrase or block markup. Those markups must be contained inside a single Element