Languages And Right-To-Left Sites

Canvas is ready for any language. Every word the theme and Canvas Core print, in the editor, in Theme Options and on the front end, can be translated, and the whole layout mirrors when the site runs in a right-to-left language.

How To Translate Canvas

Both halves of the product ship a translation template in their languages folder: canvas.pot for the theme (text domain canvas) and canvas-core.pot for Canvas Core (text domain canvas-core).

1. Install a translation tool such as Loco Translate, or use Poedit on your computer.
2. Create a translation for Canvas and one for Canvas Core in your language, starting from those templates.
3. Save the translations in the update-safe system location, wp-content/languages/themes/ and wp-content/languages/plugins/, so a Canvas update never overwrites them. Loco Translate offers this location as System.

Text in the block editor comes from JavaScript, so it is translated from JSON files rather than the .mo file. Loco Translate generates them for you; with WP-CLI, run wp i18n make-json on your .po file.

Note

Content you import with a demo, such as page text and post titles, is your content, not part of the theme. Translate it in the editor like any other page, or with a multilingual plugin.

How To Use Canvas With WPML

Canvas Core ships a wpml-config.xml file, so WPML finds the text fields of Canvas blocks and the Theme Options text on its own. Translate a page with Canvas blocks in WPML's Translation Editor the same way as any other page.

How To Run Canvas In A Right-To-Left Language

Set the site language in Settings > General > Site Language to a right-to-left language such as Arabic, Hebrew, Farsi or Urdu. Nothing else is needed: WordPress loads the mirrored version of every Canvas stylesheet in place of the original, so menus, grids, forms, headers and footers sit on the correct side. The demos are checked in right-to-left before they ship.

When you write your own styles in a block's Custom CSS field, use the logical properties rather than left and right, so your styles mirror too:

• margin-inline-start instead of margin-left, and margin-inline-end instead of margin-right
• padding-inline-start and padding-inline-end for padding
• inset-inline-start instead of left on a positioned element

They look exactly like their left and right versions on a left-to-right site.

Troubleshooting

• One element keeps its left-to-right spacing. Its spacing was typed as an inline style with left or right in it. Change it to the logical property above.
• A date picker or slider handle keeps its own layout. A few third-party widgets that Canvas includes, such as date pickers and range sliders, draw their own layout and are not mirrored.
• Your translation does not appear. Check that the file names use the text domain and locale, for example canvas-ar.mo for the theme and canvas-core-ar.mo for Canvas Core, and that they are in the folders above.