CM Tooltip (CMTG) - Use Case - How to Make a Bilingual Site (RTL Support)


Use Case – How to make a a bilingual site with RTL support

Back to User Guides

Note: This guide covers features presented in CM Tooltip Glossary Pro+ and eCommerce editions. This document uses eCommerce version 3.9.14.

Introduction

CM Tooltip Glossary allows you to create a site with a complete glossary of terms. Each term's definition can appear on mouse hover across the whole site. Pro+ and eCommerce editions support adding a Google Translate API to tooltips and term pages, to help translate their content from one language to another. This feature is particularly useful in cases where a website is meant to serve a bilingual community.

Use Case Front-End

Use Case Assumptions

In this example we will consider how to make a bilingual site with support of Right-to-Left text.

We consider that you have already bought the plugin, but not installed it. 

It follows:


Installing The plugin

The process is the same for all CM plugins and add-ons.

  • Download the plugin from your customer dashboard
  • Log in to WordPress and navigate to the WordPress Admin → Plugins settings
  • Click on Add New
  • Activate it and add the license

Learn more: Getting Started - Installation And First Steps


Recap

In this use case we will cover only converting your Glossary to bilingual mode. So, we suppose that you've already configured the plugin and know how to add terms to your Glossary. If not, it's better to get through this use case first:

Requirement

In order for the Google Translate API integration and functionality to work, the server must have a PHP cURL library installed.

You can see whether or not it is installed by navigating to  Admin Dashboard → CM Tooltip Glossary Ecommerce → User Guide. Scroll down to the System Information section, and look for PHP cURL - it must be ON.

Google Translate API Integration

To integrate a Google Translate API, you need to get a Google API key, which can be easily obtained from Google (the price for using their service depends on the usage).

To obtain an API key for translation please follow the Instructions from Google.

Next, navigate to  Admin Dashboard → CM Tooltip Glossary Ecommerce → Settings.

In the API section you need to put the key that you got in the API Key field:

Configuring Google Integration

Then you need to turn on the option Enabled? to make this feature work.

Two more important options are Source Language and Target Language. You need to choose the language in which the original text is written on your site and the language that you want to translate it to.

Optional settings:

  • Display translation and original text together - Enable this option to display translated text under the original one in the tooltip. Let's enable it for our use case.
  • Display translated term name in tooltip - If enabled, only the translated term name will be displayed under the original term name in the tooltip (overwriting the term definition). Let's disable this option for our use case.

Let's choose English as a source language and French as a target language for our use case.

Now click the button Save Changes at the bottom of the page.

To check if you the feature works well with the connected API, you can click the button  Test Google API.

If you configure everything properly, you will see a pop-up message, where the test-word "Creative" will be translated to the chosen language.

Let's see the result on the front-end:

Disabling Terms From Using Google Translation

You can disable specific terms from using Google Translation. To do this, navigate to  Admin Dashboard → CM Tooltip Glossary Ecommerce → Glossary.

Hover on needed term and click the button Edit.

In the term editor on the right side of the page find the metabox CM Tooltip - Term Properties, check the box Disable Google API for this term and then click the button Update on the top right of the page.

As a result, the term definition on the front-end will not be translated:

Shortcode

TIP: What Are Shortcodes

Shortcodes add dynamic content to your site via a small piece of code.

Learn more: Shortcodes - How To Use | Finding ID of Post/Page/Other Content

Google translate is also supported using the shortcode   [glossary_translate].

Using this this shortcode you can override default language settings for a specific post or page - for all terms of one language or only for a specific term.

The shortcode has the following parameters:

  • term - The term for which the Dictionary definition should be displayed.
  • source - The language in which the Dictionary definition is displayed.
  • target - The language into which the Dictionary definition should be translated.

Example

We want to redefine the target language for our post to Japanese language. The shortcode will look like this:

[glossary_translate source="english" target="japanese"]

We can put it in any place of our post:

Result

RTL Support

CM Tooltip Glossary supports Right-to-Left (RTL) languages, such as Hebrew.

There are two ways to enable RTL in Tooltip Glossaries.

1) Automatic

You can enable RTL (Right to Left text) support simply by checking Enable RTL Support in the path Admin Dashboard → CM Tooltip Glossary → Settings → General Settings, as shown below:

2) Manually

It's also possible to enable this function manually, but there are limitations. Two steps are needed.

a) For the  Alphabetical List on Glossary Index Page:

Add this custom CSS to your theme or in the Additional CSS option in the customizer.

.ln-letters a {      float: right !important;  }

b) For  Items on Glossary Index PageTooltip Content and Glossary page:

They will be displayed correctly when you set your whole site to RTL.

Learn more: CM Tooltip (CMTG) - Extras - RTL Support - CreativeMinds Products Documentation

Example

Let's translate our post to the Hebrew language:

End Result

Following instructions found in the plugin and guides you should be able to make a bilingual site with support of Right-to-Left text.

Use Case Front-End


More information about the CM Tooltip Glossary WordPress Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us