CODEWITHSUNDEEP
htmlcss
Hinrich
Hinrich

Reputation: 60

Arabic and latin characters get mixed up

I am currently doing the technical part of creating an Arabic version of our website. The other languages should not be affected by this, so basically the changes to the markup must be minimal.

What I have (in English):

<div class="location_description"> <span itemscope itemtype="http://schema.org/AdministrativeArea">
<span class="glyph featcl_T"></span>
<span itemprop="name">Canton of Obwalden</span>,</span>
<span class="coords" itemprop="geo" itemtype="http://schema.org/GeoCoordinates">46.77°N 8.43°E 3238m asl
    <meta itemprop="elevation" content="3238">
    <a target="_blank" title="Geonames" href="http://www.geonames.org/2658357"><span class="glyph edit">
</span>
    </a>
    <meta itemprop="latitude" content="46.77">
    <meta itemprop="longitude" content="8.43">
    </span>
</div>

"Canton of Obwalden" comes from a database, and can be Arabic too, but can also be in any other language. Our translator did the translations for "N", "E" and "m asl", and the result is a total mess... http://jsfiddle.net/stby04/xzj5czb5/

So, how do I bring that in the correct order for every possible combination of languages?

Upvotes: 0

Views: 1052

Answers (1)

Med
Med

Reputation: 136

add dir="rtl" in every tag in which you expect to have Right to Left Text

div class="arabic">
    <div class="location_description"> <span dir="rtl" itemscope="" itemtype="http://schema.org/AdministrativeArea">

                            <span dir="rtl" class="glyph featcl_T"></span>
 <span dir="rtl" class="arabic" itemprop="name">Kanton Obwalden</span>,</span> <span class="arabic" itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">46.77°ش 8.43°ق 3238متر فوق سطح البحر<meta itemprop="elevation" content="3238"><a target="_blank" title="Geonames" href="http://www.geonames.org/2658357"><span class="glyph edit"></span>
        </a>
        <meta itemprop="latitude" content="46.77">
        <meta itemprop="longitude" content="8.43">
        </span>
    </div>
</div>

Upvotes: 1

Related Questions