Customizing Stylesheets for a specific Locale

This article will explain how to customize stylesheets to be specific to a locale. This is useful when writing in multiple locales which require a different font family and page orientation (for example, right to left).

There are two methods of achieving this. We are going to use the English Locale and the Arabic Locale for our examples. The first thing you will need to do for either is create a new stylesheet.

You can add a new style to your project by:

  • Add a new stylesheet to your project by clicking the New Stylesheet ribbon button on the Project ribbon tab, or open an existing custom stylesheet by double-clicking on it in the Project Explorer (under the Other Files folder).
  • In the stylesheet editor click the Add a new Style Rule toolbar button or manually enter the CSS in the editor with the Source view selected
  • The custom style can then be edited in the visual designer by selecting it in the tree then switch to the Visual view, or manually edited in the Source view

or to a custom template by:

  • Opening an existing custom template for editing, or create a new custom template (more information on creating custom templates can be found in the online help under Customization).
  • In the Template editor select the Other Files page menu item
  • Right-click on the stylesheets folder and select the New Stylesheet context menu option
  • In the stylesheet editor click the Add a new Style Rule toolbar button or manually enter the CSS in the editor with the Source view selected
  • The custom style can then be edited in the visual designer by selecting it in the tree then switch to the Visual view, or manually edited in the Source view

Method 1 - Create a Locale Specific Stylesheet in a locale folder

Once you have created your custom stylesheet, you need create a folder in the other files section of the project explorer named stylesheets.ar and put the stylesheet in that newly created folder. Note, you would need to substitute ar for the language code for the locale you wish to have a specific locale - we are using ar in this case for Arabic.

You can find other Language codes located here: https://msdn.microsoft.com/en-us/library/ms533052(v=vs.85).aspx

The stylesheet in that folder will be automatically used in preference to any stylesheet with the same filename in the regular stylesheets folder when building output for that locale.

Method 2 - Using Build Flags

The second method would be to create build flags. You can do this by:

  1. Creating an "Arabic Only" build flag and an "English Only" Build flag,
  2. Create filtering rules in your primary build profile to exclude any content that has the "Arabic Only" build flag - you will then use the primary Build Profile only to build your Primary Locale content.
  3. Create a secondary build profile named "Arabic Only" that you will use to build Arabic locale, and use filtering to exclude any content that has the "English Only" build flag.
  4. Create a secondary custom stylesheet and apply the "Arabic Only" build flag to it.

The advantage of the this method is it will allow you to use the Preview mode inside Document! X (by selecting one of the Build Profiles and choosing "Content Editor Default" from the context menu.

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.