Trying to include Arabic in a multilingual website

support
1

Hi!

I’m trying to translate the website into Arabic too, but the thing is that in Arabic the website should go RTL (right to left) and not left to right.

If I just translate all the words, I will have it in Arabic, but the website direction will be wrong.

How can I do that?
The default language is English

P.S. I’m using Bulma

2

You can do that in your CSS and don’t need any Hugo features as far as I know.

For example, to change the direction of paragraphs:

p {direction: rtl;}

To make sure this only affects the arabic version, you can add the language code as a class in the body:

<body class="{{ .Lang }}">

And then on your css, the following should work:

body.ar p{ direction: rtl; }
2 Likes
3

I see what you say conceptually, but I can’t get it working.

What I did:

  • Added <body class="{{ .Lang }}">
  • In the main css file inside the static folder I added body.ar { direction: rtl; } but nothing happens.
  • I have tried with other elements too like footer but again, it doesn’t work, unless I do the styling directly inside the element like <footer style="direction:rtl;">

Can you just write down step by step what should I do when you talk about:

To make sure this only affects the arabic version, you can add the language code as a class in the body:

<body class="{{ .Lang }}">

And then on your css, the following should work:

body.ar p{ direction: rtl; }

Repo if you need it

4

Can you check what is the output of .Lang ?

I am assuming that you have already have the multilingual mode working. If that’s not the case we can guide you through the process: https://gohugo.io/content-management/multilingual/#readout

5

Now, after redoing the same steps, it works! s
So thanks!

Output of .Lang -> when arabic is selected -> “ar” and when english is selected -> “en”

Maybe it was cache or something.

But the header is being weird.

Instead of:

Screenshot%20from%202019-03-25%2013-24-26
Screenshot from 2019-03-25 13-24-26.png1346×106 5.75 KB

I get:

Screenshot%20from%202019-03-25%2013-23-47
Screenshot from 2019-03-25 13-23-47.png1348×82 5.49 KB

The website title is in the right position, but the main menu and the language dropdown menu are not in the correct positions.

Also, when I try the website in the responsive mode, the hamburger menu is not in the right position:

Screenshot%20from%202019-03-25%2013-29-09

Instead of having the hamburger menu in the extreme left:

Screenshot%20from%202019-03-25%2013-30-16

1 Like
6

That’s because you are applying the css to the whole body tag. Do something like body.ar p

7

But the things is that I need to actually apply it to all the content in the page.
If I for instance set to the rtl direction the <a> element, then the header doesn’t go Right to Left.

My header code:


    <body class="{{ .Lang }}">
        {{ partial "body-open" . }}
        <nav class="navbar" role="navigation" aria-label="main navigation">

                <div class="navbar-brand">

                    <a class="navbar-item is-size-4" href="{{ i18n "siteTitle" . }}">{{ .Site.Title }}</a>

                    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>

                </div>

                <div class="navbar-menu" id="nav-menu">

                    {{ if .Site.Menus.main }}
                        <div class="navbar-start">
                            {{ range sort .Site.Menus.main }}
                                <a href="{{ .URL }}" class="navbar-item">{{ .Name }}</a>
                            {{ end }}
                        </div>
                    {{ end }}

                    {{ if gt (len .Site.Home.AllTranslations) 1 }}
                        <div class="navbar-end">
                                <div class="navbar-item dropdown">
                                        <div class="dropdown-trigger">
                                            <button class="button" style="color: dodgerblue;" aria-haspopup="true" aria-controls="dropdown-menu4">
                                            <span>
                                                {{ i18n "language" }} 
                                            </span>
                                            <span class="icon is-small">
                                                <i class="fas fa-angle-down" aria-hidden="true"></i>
                                            </span>

                                            <div class="navbar-dropdown">
                                                {{ range .Site.Home.AllTranslations }}
                                                    <a class="navbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
                                                {{ end }}
                                            </div>
                                        </div>
                                </div>
                        </div>
                    {{ end }}
                </div>

        </nav>

I have many different elements that needs to change the direction not just one element like <p>.

8

To solve that, you need to find an element in your theme where all those elements are encapsulated.
Or several of those elements.

This is more css than Hugo. And you can try to learn a bit more about it on CodeCademy: https://www.codecademy.com/learn/learn-css

9

Ok, thank you!

1 Like
10

I think something like that is cleaner:

<body lang="{{ .Lang }}">

And

body:lang(ar) p{ direction: rtl; }

See https://developer.mozilla.org/en-US/docs/Web/CSS/:lang and https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lang

So the Browser is aware of the language (with the lang attribute). Using a class name doesn’t allow that flexibility.

1 Like