Jump to content

Basic multi directionality theme/style notes

Faisal

By Faisal,
in Tutorials

 Share

Recommended Posts

Faisal Full Member

Faisal

Posted
Posted

Greetings,
 
Most of you know this but there are some who need to know how or what are the options available! and what ProcessWire can do to help making it easier.
 
And before we start if your website is "LTR" Left to Right only then you don't need to read this, and if your website is "RTL" Right to Left only I will assume that you also don't need to continue reading! because you know what to do.
If you don't here are the basics:
As you always do in "RTL" you add to your main style file

html, body {
direction: rtl;
}

And you may want to change

<html>
to
<html dir="rtl">

Depends if you need it or not, maybe for JS alerts or something.

And the rest is up to you.

 

OK let get started with multi directionality:
 
If you are going do this or if you need this that's mean you have more than one language, let's say English/LTR and Arabic/RTL

So go to PW admin area -> modules -> Core and install Languages Support, Languages Support - Fields and Languages Support - Page Names and add new language (name=arabic)

From this point there is more than one way to get the job done, and here are some basic exsamples:

lets say that you have English is default language and your main style name is main.css

and with simple content example:

body {
    background: #e4ebee url(images/bg.gif) repeat-x;
}
.something {
    width: 179px;
    height: 25px;
    float: left;
    text-align: left;
}

Create new style file to hold the Right to left code let's name it main-rtl.css

and with simple above the content for RTL will be:

body {
    direction: rtl;
}
.something {
    float: right;
    text-align: right;
}

Now in your original head.inc you have something like this:

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title><?php echo $page->get("headline|title"); ?></title>

    <meta name="description" content="<?php echo $page->summary; ?>" />

    <meta name="generator" content="ProcessWire <?php echo $config->version; ?>" />

    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/ie.css" />
    <![endif]-->    

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>

    <!--
    This website is powered by ProcessWire CMF/CMS.
    ProcessWire is a free open source content management framework licensed under the GNU GPL.
    ProcessWire is Copyright 2012 by Ryan Cramer / Ryan Cramer Design, LLC.
    Learn more about ProcessWire at: http://processwire.com
    -->

</head>

What you need to do is after the main.css line add this:

    <?php
    if ($user->language->name === "arabic") {
        echo '<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/main-rtl.css" />';
    }
    ?>

So the final code will be

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title><?php echo $page->get("headline|title"); ?></title>

    <meta name="description" content="<?php echo $page->summary; ?>" />

    <meta name="generator" content="ProcessWire <?php echo $config->version; ?>" />

    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
    <?php
    if ($user->language->name === "arabic") {
        echo '<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/main-rtl.css" />';
    }
    ?>

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/ie.css" />
    <![endif]-->    

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>

    <!--
    This website is powered by ProcessWire CMF/CMS.
    ProcessWire is a free open source content management framework licensed under the GNU GPL.
    ProcessWire is Copyright 2012 by Ryan Cramer / Ryan Cramer Design, LLC.
    Learn more about ProcessWire at: http://processwire.com
    -->

</head>

Another way is using translations

For example:

<!DOCTYPE html>
<html dir="<?php echo __("ltr"); ?>">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title><?php echo $page->get("headline|title"); ?></title>

    <meta name="description" content="<?php echo $page->summary; ?>" />

    <meta name="generator" content="ProcessWire <?php echo $config->version; ?>" />

    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
    <style>
        body {
            direction: <?php echo __("ltr"); ?>;
        }
    </style>

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/ie.css" />
    <![endif]-->    

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>

    <!--
    This website is powered by ProcessWire CMF/CMS.
    ProcessWire is a free open source content management framework licensed under the GNU GPL.
    ProcessWire is Copyright 2012 by Ryan Cramer / Ryan Cramer Design, LLC.
    Learn more about ProcessWire at: http://processwire.com
    -->

</head>

Now go to PW admin area -> Languages -> arabic -> Translate New File -> select your head.inc

Translate ltr to be rtl

And of course you can also do something like

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main-<?php echo __("ltr"); ?>.css" />

But rename your main style name is main-ltr.css

And so on..

Please know that it is always depends on how your design is made and what it's need!

One small problem in PW2.4 with TinyMCE read about it here

And One small problem in PW2.5 "dev" with CKEditor read about it here

I hope this is useful to you.

  • Like 4
Link to comment
Share on other sites
arjen Hero Member

arjen

Posted
Posted
Thanks for posting Faisal. I've done it like this: 

  1. Create a checkbox called "rtl" and add it to the language template.
  2. elect which languages are rtl and check the checkbox and save them.
  3. Using code like $user->language->rtl keeps your logic clean, especially when having multiple rtl languages.
  4. In my _init.php I create a boolean variable called $rtl which checks if the $user->language->rtl so I have access to it in my template files.
  5. Following this structure saves you time when adding a new rtl language since you don't have to alter any code and/or have to deploy to your live website.
  • Like 5
Link to comment
Share on other sites
Faisal Full Member

Faisal

Posted
  • Author
Posted

Yes, that's nice
If you are having a long list of "RTL" languages you will need more effective solution, so it's fair having one new field in database. :)
 
I don't want to go advance because it's not just rtl for multi languages, some languages need special font-family, font-size and so on....
 
I am working in website at this time that have global field "custom_css" so evrey page can have additional css file for some special effects if needed so I don't have to load all css in a page that don't use it.
This can also be used for multi languages if needed.
 
Thank you for sharing your idea, and I hope others do so if they have any ideas with some code samples because there are people are not code writers who do not know some of the technical terms, but they can do will just from an example or a source code ;)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...