Recipe12.9.Localizing Look and Feel

Recipe 12.9. Localizing Look and Feel

Problem

You want your HTML pages to have a different style depending on the user's locale.

Solution

Use a combination of a global Cascading Style Sheet (CSS) and a locale-specific style sheet. The paths for the style sheets are stored as resource bundle properties. Because style sheets are merged, you only need to override those locale-specific styles that are different than the global styles.

Recipe 12.9.2.1 Using Struts tags

<style>     <!--         <bean:define >             <bean:message key="css.global"/>         </bean:define>         @import url(<html:rewrite page="<%=globalStyle%>"/>);         <bean:define >             <bean:message key="css.local"/>         </bean:define>         @import url(<html:rewrite page="<%=localStyle%>"/>);     --> </style>

Recipe 12.9.2.2 Using JSTL tags

<style>     <!--     <fmt:message key="css.global" var="globalStyle"/>     @import url(<c:url value="${globalStyle}"/>)     <fmt:message key="css.local" var="localStyle"/>     @import url(<c:url value="${localStyle}"/>)     --> </style>

Discussion

Style sheets can be chosen and applied based on locale in the same manner that images are retrieved as shown in Recipe 12.7. You can use the Struts tags or the JSTL tags. Use bean:message or fmt:message to retrieve a context-relative style sheet path. For example, you would configure paths for a global and locale-specific style sheet in your base resource bundle (ApplicationResources.properties):

css.global=/styles/global.css css.local=/styles/local.css

The locale-specific file, /styles/local.css, needs to be defined but doesn't need to contain any text. It's specified in the base resource bundle as a fallback value in case a locale-specific style sheet isn't defined. To define the locale-specific style sheet, specify a property in that locale's resource bundle for the style sheet. Here are the properties, for example, for a style sheet with styles and colors specific to Spanish from the ApplicationResources_es.properties file:

css.local=/styles/es/local.css

As with organizing locale-specific images, using directory names that correspond to locales is a good way to organize your style sheets.