django right-to-left language with LANGUAGE_BIDI does not work

Issue

I am building a multi-language site with one of the languages "farsi":
Everything worked fine so far, but the right to left language "farsi/persian" is not aligned right, when beginning a next line of text. That means the next line is not aligned at the right as usual for right-to-left languages.
The translation work.

settings.py

gettext = lambda s: s

#default language should be german
LANGUAGE_CODE = 'de'
#LANGUAGE_CODE = 'en'
#LANGUAGE_CODE = 'fa'


LANGUAGES = (
    #('fr', gettext('French')),
    ('de', gettext('German')),
    ('en', gettext('English')),
    ('fa', gettext('Farsi')),
    #('pt-br', gettext("Brazil")),
)

language_chooser.html

{% load localeurl_tags %}
{% load i18n %}
{% load tabs %} 


{% for lang in LANGUAGES %}
        {% ifequal lang.0 LANGUAGE_CODE %}
           <li class="active"><a>{{ lang.1 }}</a></li>
        {% else %}

<!--
        {% if LANGUAGE_BIDI %}
          <li>The current language is bidirectional</li>
        {% else %}
          <li>The current language is <b>not</b> bidirectional</li>
        {% endif %}
-->
           <li class="{% ifactivetab "en" %}active{% else %}inactive{% endifactivetab %}"><a href="{{ request.path|chlocale:lang.0 }}" accesskey="2">{{ lang.1 }}</a></li>
        {% endifequal %}
{% endfor %}

in the base.html I also load:

{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_current_language_bidi as LANGUAGE_BIDI %}

My django.po file for "farsi/persian" language looks like:
alt text

How can I manage this?

Solution:
After defining a new css class "article_right_aligned_language" with the attribute "text-align:right; direction:rtl" and modifying my base template as follows, it works now !!

      <div {% if LANGUAGE_BIDI %} class="article_right_aligned_language" {% else %} class="article" {% endif %}>
        {% block site_wrapper %}{% endblock %}
      </div>

Solution

Text alignment is handled by CSS not Django. Set the text-align property on the container element:

.container.right-aligned-language {
    text-align: right;
}

Then you can apply the class right-aligned-language to your container (or body tag for that matter) with a conditional statement in your template.

Answered By – Marcus Whybrow

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published