RapidWeaver Multi Language (RWML)
Tsooj Media: You've got this great Multi Language website and it's made with RapidWeaver?
Client: “Yep thats wright, RapidWeaver is amazing Web Design Software”
Tsooj Media: It sure is, but how do you manage your Multi Language content?
Client: “Thats simple by creating a new RW Project file for each Language”
Tsooj Media: Thats not simple at all, have a look at our RWML Stacks set. These stacks
can easily turn a single RapidWeaver project file into a Multi Language enabled website...
RWML Examples
Below a demonstration video of the RWML stacks set in action, the download file comes with the demonstration RapidWeaver project files.
Demonstration video in HD format
(click on HD) and without sound.
More examples
Have a look at this Mondrian Theme example and the Casas Rurales Honorato websites, both using the RWML stacks set.
Credits for the last example websites goto Yolanda from Santander Design.
Torsten from actualChange:
“Thank you very much for RWML. It just works great! Converting the page to a dual language version was done in about a day.
No two projects, everything on one page, good to manage.”
The Tablet On The Wall website is a great example showing Vogel's RingO® mounting system for tablet devices.
This website uses the new beta version of RWML including the new Menu Item stacks to define all your menu items.
RWML Manual
The example video demonstrates all the available options that come with the RapidWeaver Multi Language stacks set.
Although we are sure you will find some other usage for these stacks as well so expect us to update this manual with some new features.
Each individual stack option has his own Tooltip (visible when hovering over an option in the HUD). So you are probably informed enough to get you started with creating your own RWML enabled Websites but of course we've also created this more detailed manual with more information about each stack thats available in this set.
The RWML Stacks set contains the following stacks:
- RWML Enclosure, add this stack once on each page to enable the RWML System and set the global RWML options;
- RWML Content, defines a stackable element and automatically sets the Language property for all the other stacks that you place into this stack;
- RWML Short Text, similar to the Content stack but with a custom interface that enables you to add up to 10 different short text items. So that is for 10 different languages. This stack comes in handy if for example you would like to add some caption information below an image in different languages;
- RWML Switch (Styled), creates a clickable “button like element” that enables a visitor to switch to another Language and show the corresponding content. This stack is just like a normal styled text stack so you can also place Images inside this Switch Stack;
- RWML Switch (Image), this stack is similar to the previous one but with the difference that it only accepts images for the creation of the button element;
- RWML Redirect, in some situations you would like to redirect your visitors to a different page because you're using a page type like for example the RapidWeaver built-in contact form page. This page type isn't that easy to “customize”, not even by using the included RWML Snippets (we'll be writing about those later) so you can simply use this stack to redirect a visitor to a different page for each extra Language. The stack has a custom interface and can create up to 10 different destinations based on the corresponding Language. You can also use this stack to create a Welcome Page where a visitor of your website should select a Language on his first visit of the Website. The demo RW project file that comes with the download package has an example of both situations. When switching to another Language the RWML System automatically performs the redirect actions when needed.
Besides these stacks you can also work with our Snippets, Custom HTML and use the RWML System to change the Navigation Menu aka Toolbar from you Website into a Multi Language element. Besides that you can also add items into the Navigation Menu to change the selected Language.
More details
Below a more detailed explanation on how to use the specific Multi Language Stacks with their own options.
Click on an item to show/hide it's documentation content.
Default
Language
Set the Default Language value that should be handled on this page by the RWML System, note that there should be at least one RWML Content Stack (or lang defined element when using custom HTML) that is defined for this Language.
Switch speed
Set the speed at which the selected (Language) content will appear when switching to another Language. When setting this value to 0 the content appears immediately.
Remember for
The chosen Language by the visitor of your Website is automatically stored in the RWML cookie that remains and automatically renews for the selected number of days. If you want to make it a session cookie only, so that it is removed after closing the browser, you should select a value of zero.
Set the Default Language value that should be handled on this page by the RWML System, note that there should be at least one RWML Content Stack (or lang defined element when using custom HTML) that is defined for this Language.
Switch speed
Set the speed at which the selected (Language) content will appear when switching to another Language. When setting this value to 0 the content appears immediately.
Remember for
The chosen Language by the visitor of your Website is automatically stored in the RWML cookie that remains and automatically renews for the selected number of days. If you want to make it a session cookie only, so that it is removed after closing the browser, you should select a value of zero.
Auto select Default
Language
Check if the Default Language should be automatically selected when a visitor visits the website for the first time. In most situations the Auto select option should be used. Disable this options when you for example are using the RWML Redirect Stack on some kind of Welcome Page and you want the visiter to select a Language for the first website visit.
Check if the Default Language should be automatically selected when a visitor visits the website for the first time. In most situations the Auto select option should be used. Disable this options when you for example are using the RWML Redirect Stack on some kind of Welcome Page and you want the visiter to select a Language for the first website visit.
Show information
block
By default the RWML Content stack has an information block to make the identification of the Language elements easier in edit mode. When the stack is used in small columns you can disable it's visibility. Simply drag the stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Language
Set the Language value for this content element, simply replace EN with your “two letter” named language abbreviation.
We advise to set the Margin and Padding values to zero if you want to achieve a seamless result between the different content stacks.
By default the RWML Content stack has an information block to make the identification of the Language elements easier in edit mode. When the stack is used in small columns you can disable it's visibility. Simply drag the stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Language
Set the Language value for this content element, simply replace EN with your “two letter” named language abbreviation.
We advise to set the Margin and Padding values to zero if you want to achieve a seamless result between the different content stacks.
Languages
Select the number of (used) Languages that should appear in the Custom Interface as used by this stack..
Text formatting and alignment
Currently the text input field(s) in the Custom Input Interface only accept unformatted text. You can use thes HUD items to select the formatting and alignment of the entire Short Text element. Default value for the alignment is center but you can also use the values left or right.
We would like to hear from you if this stack should have more options.
Select the number of (used) Languages that should appear in the Custom Interface as used by this stack..
Text formatting and alignment
Currently the text input field(s) in the Custom Input Interface only accept unformatted text. You can use thes HUD items to select the formatting and alignment of the entire Short Text element. Default value for the alignment is center but you can also use the values left or right.
We would like to hear from you if this stack should have more options.
Example image
showing the Custom
Interface
Show information
block
By default the RWML Switch stacks have an information block to make the identification of the selected Language easier in edit mode. When these stacks are used in small columns you can disable it's visibility. Simply drag a stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Language
Set the language value for this Switch element, all content inside this stack is automatically turned into a “button”. When a visitor “clicks” on this button, the RWML system automatically selects the chosen language. Simply replace EN with your named language abbreviation.
Tooltip
Type a short Tooltip text as you want it to appear when your visitors hover their mouse over the “Switch Language button”.
By default the RWML Switch stacks have an information block to make the identification of the selected Language easier in edit mode. When these stacks are used in small columns you can disable it's visibility. Simply drag a stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Language
Set the language value for this Switch element, all content inside this stack is automatically turned into a “button”. When a visitor “clicks” on this button, the RWML system automatically selects the chosen language. Simply replace EN with your named language abbreviation.
Tooltip
Type a short Tooltip text as you want it to appear when your visitors hover their mouse over the “Switch Language button”.
Redirects
Select the number of Languages that should have a redirect option on this page. Note that this could be less than the total amount of used Languages.
Adding the redirect
All the Language abbreviation(s) are added by using the Custom Input fields. Note that both the fields only take unformatted text and the Redirect URL should be a fully named URL.
We would like to hear from you if this stack should have more options.
Select the number of Languages that should have a redirect option on this page. Note that this could be less than the total amount of used Languages.
Adding the redirect
All the Language abbreviation(s) are added by using the Custom Input fields. Note that both the fields only take unformatted text and the Redirect URL should be a fully named URL.
We would like to hear from you if this stack should have more options.
Example image
showing the Custom
Interface
Besides using all those cool
Stacks you can also use the
Snippets that come with the
download package. The coolest
feature of the RWML system is
probably changing the Theme's
Navigation Menu items aka Toolbar
into a Multi Language element.
Have we already mentioned that
you can also use the same Toolbar
to add a Language Switch...
Using Snippets
Lets start with the Snippets (View | Show Snippets), the first 3 are more or less the same as the also named Stacks. You can use these snippets inside a HTML or Styled text Stack and the Sidebar. Simply open the Snippets window with the keys Command + 5, type RWML in the search box and drag the required snippet onto the page.
Note that while using snippets it sometimes is best to use the ignore formatting options to prevent RapidWeaver from changing HTML code. Using the ignore formatting is simple via the pulldown menu Formatting | Ignore formatting or by using the key combination Command + . to achieve the same result.
Using Snippets
Lets start with the Snippets (View | Show Snippets), the first 3 are more or less the same as the also named Stacks. You can use these snippets inside a HTML or Styled text Stack and the Sidebar. Simply open the Snippets window with the keys Command + 5, type RWML in the search box and drag the required snippet onto the page.
Note that while using snippets it sometimes is best to use the ignore formatting options to prevent RapidWeaver from changing HTML code. Using the ignore formatting is simple via the pulldown menu Formatting | Ignore formatting or by using the key combination Command + . to achieve the same result.
Short Text
The Short Text snippet is great for all short text that you would like to use in different Languages. It also comes in handy if you would like to change the navigation menu into a Multi Language element.
Simply drag the snippet onto the page and replace the used Language (EN) and Text (Add your Short Text here) values with your own values.
Content Block
Similar actions like the Short Text snippet but with the difference that it could contain more content than a single line of text.
Switch Language
Drag the snippet onto the page and replace the EN values with your own values like for example NL. Note that the rel value of rwml should not be changed and that the hreflang value is required to define the “Switch Language”. Of course you also add your own content that should appear as the “Switch Button”.
The Short Text snippet is great for all short text that you would like to use in different Languages. It also comes in handy if you would like to change the navigation menu into a Multi Language element.
Simply drag the snippet onto the page and replace the used Language (EN) and Text (Add your Short Text here) values with your own values.
Content Block
Similar actions like the Short Text snippet but with the difference that it could contain more content than a single line of text.
Switch Language
Drag the snippet onto the page and replace the EN values with your own values like for example NL. Note that the rel value of rwml should not be changed and that the hreflang value is required to define the “Switch Language”. Of course you also add your own content that should appear as the “Switch Button”.
Language
abbreviations
Just a simple snippet with the link to the W3C website with more information about using the HTML lang attribute.
NoScript
Since the RWML System is a jQuery (JavaScript) based engine that dynamically changes the Language enabled content of your website it also requires that JavaScript is enabled in the browser. This snippet comes in handy in the rare case that a visitor has JavaScript disabled. The snippet contains HTML code to automatically redirect the visitor to a Privacy Information page to explain the situation.
Privacy Information
A sample privacy information text that you can use and freely modify to your own needs. Since the RWML System stores the selected Language in a Cookie (so that it can be automatically used again for a next website visit) we find that it is a good choice to inform your visitors of this situation. You can also add the Privacy Information snippet in combination with the NoScript snippet.
Need more snippets or functions? Just let us know...
Just a simple snippet with the link to the W3C website with more information about using the HTML lang attribute.
NoScript
Since the RWML System is a jQuery (JavaScript) based engine that dynamically changes the Language enabled content of your website it also requires that JavaScript is enabled in the browser. This snippet comes in handy in the rare case that a visitor has JavaScript disabled. The snippet contains HTML code to automatically redirect the visitor to a Privacy Information page to explain the situation.
Privacy Information
A sample privacy information text that you can use and freely modify to your own needs. Since the RWML System stores the selected Language in a Cookie (so that it can be automatically used again for a next website visit) we find that it is a good choice to inform your visitors of this situation. You can also add the Privacy Information snippet in combination with the NoScript snippet.
Need more snippets or functions? Just let us know...
Change “Theme Navigation
Menu”
With the RWML System it is possible to “modify” the Navigation Menu items, so that they also show the text value that corresponds with the chosen Language. That is to use different text (or images) based on the Short Text snippet. This feature is best explained by looking at the example project and the image below. Both included in the download package for the RWML Stacks set.
With the RWML System it is possible to “modify” the Navigation Menu items, so that they also show the text value that corresponds with the chosen Language. That is to use different text (or images) based on the Short Text snippet. This feature is best explained by looking at the example project and the image below. Both included in the download package for the RWML Stacks set.
How to
Simply drag the Short text snippet into the Page Title field and replace the used Language (EN) and Text (Add your Short Text here) values with your own values.
Repeat this for every Menu item that should be different in other Languages.
Browser Title
Note that you should also add a correct Browser Title since this is a fixed field that doesn't allow some kind of language variation.
Simply drag the Short text snippet into the Page Title field and replace the used Language (EN) and Text (Add your Short Text here) values with your own values.
Repeat this for every Menu item that should be different in other Languages.
Browser Title
Note that you should also add a correct Browser Title since this is a fixed field that doesn't allow some kind of language variation.
Note that
changing the content of the
Navigation Menu aka Toolbar
requires a compatible theme.
We're working on a new Menu Item
stack that enables easy menu
translatons. If the theme you are
using is not working with RWML
than please
send
us an
email
.
Note that the Page Title input
length could be limited by
RapidWeaver and/or special
characters.
Custom Language Switches
Besides using the default Language Switch Stacks and the corresponding Snippets you can also create a Switch element by using the RapidWeaver built-in Add Link options or by using the Navigation Menu. The Navigation Menu also? Yep that is also one of the options.
Besides using the default Language Switch Stacks and the corresponding Snippets you can also create a Switch element by using the RapidWeaver built-in Add Link options or by using the Navigation Menu. The Navigation Menu also? Yep that is also one of the options.
How to
All you have to do is create a new page, set the page Folder to “/rwml-sys” and set the Page Title as the required Language. The RWML System automatically detects this as a Language Switch.
Repeat this for every Language Switch that you would like to appear in the navigation Menu of your website. The Filename is set to “nl.html” but this could be anything your prefer.
Advice
We advice to use the RapidWeaver built-in Offsite Page type for these Language Switches. Simply because this page type doesn't require extra content and in the rare case that a visitor has JavaScript disabled so you can automatically redirect them to another page like for example a information page.
All you have to do is create a new page, set the page Folder to “/rwml-sys” and set the Page Title as the required Language. The RWML System automatically detects this as a Language Switch.
Repeat this for every Language Switch that you would like to appear in the navigation Menu of your website. The Filename is set to “nl.html” but this could be anything your prefer.
Advice
We advice to use the RapidWeaver built-in Offsite Page type for these Language Switches. Simply because this page type doesn't require extra content and in the rare case that a visitor has JavaScript disabled so you can automatically redirect them to another page like for example a information page.
Manually Add
Link
Of course you can also use the RapidWeaver built-in Add Link feature to create a Language Switch. Simply add you text or image in a styled text stack or the sidebar. Select it and click on the Add Link button.
In the Edit Link dialog you should at least add the rel value of rwml and the hreflang value should contain the Language abbreviation that you would like the Switch to use.
Note that
Adding the document position of for example #rwml-EN is not a must but it sure is recommended since you could use this for a link to a position in the rare case that scripts are disabled.
Of course you can also use the RapidWeaver built-in Add Link feature to create a Language Switch. Simply add you text or image in a styled text stack or the sidebar. Select it and click on the Add Link button.
In the Edit Link dialog you should at least add the rel value of rwml and the hreflang value should contain the Language abbreviation that you would like the Switch to use.
Note that
Adding the document position of for example #rwml-EN is not a must but it sure is recommended since you could use this for a link to a position in the rare case that scripts are disabled.
RWML FAQ
All currently known FAQ items are shown below, if you believe something is missing we sure would like to know.
By default the RWML System is not
limited to a maximum number of
Languages. It all depends on the
number of Languages and the total
amount of stacks that you want to
use on a single page. The RWML
Stacks are designed in such a way
that you are able to keep the
total number of stacks at a
minimum. If you want you can also
combine them with the WebYep
Stacks so that you are
able to edit only the
content for the chosen
Language in your favorite
web browser.
Sure you can, the RWML System has
this built-in feature of hiding
all normal page content while the
page is loading. Simply add your
custom code containing a lang
definition inside a div element
with the special class like the
following <div
class='rwml-sys'>...your
content...</div>.
Simply put the Enclosure stack in
the so called “Clear settings
mode”, that is with the “Remember
for” option set to 0 days and the
“Auto select Default Language”
turned off. In some situations it
requires a restart of RapidWeaver
and closing Safari first since
the settings cookie is shared on
your local system. You could use
this technique if you want to
test for example a “Welcome and
select Language Page” from within
RapidWeaver.
Note that you should (pre)view the page to make the clearing appear.
Note that you should (pre)view the page to make the clearing appear.
The RWML System uses a Cookie
named “rwml_preferred_language”
to store its settings. This is a
common technique used by a large
amount of web services like for
example Google Analytics or the
RealMac Software Forum. The
Cookie is automatically generated
on a per domain base and detects
if you are using it with http or
https. So in case you would like
to remove the settings by hand,
use your browsers preferences
dialog en look for the previous
named Cookie.
The way that search engines use
keywords and other meta tags is
changing all the time. So it
could be that one moment you
should use them and the other you
shouldn't. Best is to know that
you can also add these meta tags
for each different language. Note
that these are added into your
page header as meta data only and
that they stay the same when
switching to another language.
Example of the keywords and description that could be used for the RWML example
<meta name="keywords" lang="en" content="strawberries, raspberry" />
<meta name="keywords" lang="nl" content="aardbeien, framboos" />
<meta name="description" lang="en" content="information about fruits" />
<meta name="description" lang="nl" content="informatie over fruit" />
Note that it is also good practice to add a Content Language tag:
<meta http-equiv="Content-Language" content="en, nl"/> or in some situations <meta name="language" content="en, nl" />
How to achieve this with RapidWeaver?
Use you site setup or the header section of an individual page and add the required tags for each language.
Example of the keywords and description that could be used for the RWML example
<meta name="keywords" lang="en" content="strawberries, raspberry" />
<meta name="keywords" lang="nl" content="aardbeien, framboos" />
<meta name="description" lang="en" content="information about fruits" />
<meta name="description" lang="nl" content="informatie over fruit" />
Note that it is also good practice to add a Content Language tag:
<meta http-equiv="Content-Language" content="en, nl"/> or in some situations <meta name="language" content="en, nl" />
How to achieve this with RapidWeaver?
Use you site setup or the header section of an individual page and add the required tags for each language.
The keywords and
description should be added
for each individual
language. When added into
the site setup all the meta
tags are automatically
added into the Meta Tags
section for each new page.
You can also add or modify your meta tags for an individual page by using the Header section in the Page Inspector.
Note that you can also copy the meta tags from an individual page to all other pages by using the Apply to All Pages feature on the General tab from the page Inspector. All you select is Headers in the Apply to all dialog.
The http-equiv Content language should be added manually into the Custom Header section.
The advanced example project that comes with the download file is showing an example of these meta tags.
You can also add or modify your meta tags for an individual page by using the Header section in the Page Inspector.
Note that you can also copy the meta tags from an individual page to all other pages by using the Apply to All Pages feature on the General tab from the page Inspector. All you select is Headers in the Apply to all dialog.
The http-equiv Content language should be added manually into the Custom Header section.
The advanced example project that comes with the download file is showing an example of these meta tags.
Some of the 3th party themes come
with a predefined language
setting like for example:
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'> or <html lang='en'>
This making the default language of the content “EN”, the RWML System only applies the language switch on the document body so this won't affect the visibility of the content. We are looking into this and if this should be modified or not.
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'> or <html lang='en'>
This making the default language of the content “EN”, the RWML System only applies the language switch on the document body so this won't affect the visibility of the content. We are looking into this and if this should be modified or not.
The RWML system is compatible
with the Extra Content system,
note that you should place for
example a RWML Content stack
inside an Extra Content stack and
not the other way around. Why?
The extra content stack's content
is removed at runtime and so no
longer contained inside the RWML
content stack.
How the translation is done is
completely up to you. Simply add
(a) content (stack), set the
Language and add the
corresponding content. So there
is no automatic translation
involved by using for example
Google Translate. Sure you can
use this as a start point for
your translations but keep in
mind that these services are good
and not without challenges...
RWML Information
The RapidWeaver Multi Language Stacks set is a powerful set of stacks featuring the jQuery based RWML System. Base task of the RWML System is to easily turn a single RapidWeaver project file into a Multi Language enabled website. So you no longer have to create another project file for each Language. It automatically adds the required HTML Lang(uage) attribute to your content. This is meant to assist search engines and browsers.
It's not only for normal content elements as you are used to with most stacks and plugins. You can also use it to turn the Navigation Menu of your website into a Multi Language element and use it to Switch to another Language. Besides that the RWML System is smart enough to remember the chosen Language of your website visitors. So when they visit your website again it automatically shows the content in their Language.
I hear you thinking, thats interesting... It sure is so we suggest that you grab yourself some thee or coffee, watch the examples and manual. Then take another cup and create your own Multi Language website...
What you get when purchasing this Stacks set:
- Starting with the six Stacks (Enclosure, Content, Short Text, Switch Styled, Switch Image and Redirect);
- The Snippets that resemble the Stacks and some extra Snippets;
- RapidWeaver example project as shown in the video demonstration.
- RapidWeaver 4 or 5;
- Stacks Plugin 1.4 or above.
For those who are interested in the changes made to the RapidWeaver Multi Language Stacks set.
First public release (on 27 march
2011)