Bablic markup is html attributes you can use in your site HTML to configure Bablic behavior 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.
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 <!-- bablic exclude -->blue<!-- /bablic -->, like your eyes</span>
Will be sent to translation asMy 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 Key
bablic-key is used to assign your own unique key to a text phrase. This key will help you assign phrases in Bablic to your own system. When you change the content of a phrase that has a key, Bablic will allow you to translate the new content, but until it is translated, will use the previous translation for that phrase
Example usage of bablic-key:
<a bablic-key="menu.about">About</a>
Bablic Tags
bablic-tags is used to add tags to phrases. You can assign multiple tags to multiple contents. The tags can be used later in the Bablic for filtering. The value of the attribute is a comma separated list. The attribute can be on any element that contains the phrase (for example you can put a tag on the top <html> element, that will be added to all phrases in that page).
Tags will be added next time you scan the page or open it in Visual Editor and you can view them and filter by them in Text Editor. But, removing tags from markup after they were detected by Bablic, will not remove them from those phrases. You can remove tags only from the Text Editor. To do that mark the phrases and click "Edit Tags" action.
Example usage of bablic-tags that adds 2 tags to a phrase:
<a bablic-tags="product,title">Brown T-Shirt</a>
Bablic ID
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 <!-- bablic include --> This text will be translated, <!-- /bablic --></div>
Comment tags do NOT support phrase or block markup. Those markups must be contained inside a single Element