CSS not support arabic [closed]

StackOverflow https://stackoverflow.com/questions/21848857

Question

I have the following menu:

<ul class="menu">
  <li><a href="index.html">Home Page</a></li>
  <li><a href="news.html">Our News</a></li>
  <li><a class="active" href="services.html">Our Services</a></li>
  <li><a href="products.html">Our Products</a></li>
  <li class="last-item"><a href="contacts.html">Contact Us</a></li>
</ul>

The problem is, when I use Arabic text inside the a tags, the text disappears.

As an example,

<ul class="menu">
  <li><a href="index.html">الر ئيسي</a></li>
  <li><a href="news.html">الاخبار</a></li>
  <li><a class="active" href="services.html">الخدمات</a></li>
  <li><a href="products.html">المنتجات</a></li>
  <li class="last-item"><a href="contacts.html">اتصل بنا</a></li>
</ul>

even though I'm using meta charset="utf-8" in the HTML page. My css code:

.menu li a, .list-1 li a, .button-2, .logo {
    text-decoration:none
}
.menu {
    width:100%
}
.menu li {
    float:left;
    position:relative;
    margin-right:1px
}
.menu li.last-item {
    margin:0
}
.menu li a {
    display:inline-block;
    width:196px;
    font-size:17px;
    line-height:1.22em;
    padding:18px 0 36px;
    margin-top:10px;
    color:#fff;
    background:#000;
    text-align:center;
    border-radius:18px 18px 0 0;
    -moz-border-radius:18px 18px 0 0;
    -webkit-border-radius:18px 18px 0 0
}
.menu li a.active, .menu li a:hover {
    color:#0f0f0f;
    background:#fff;
    padding:28px 0 36px;
    margin:0
}

the template i use in this link http://www.mediafire.com/download/w5uf9wapenyitn3/myTemplate.rar

Was it helpful?

Solution 2

The Problem is here with this file:

<script src="js/cufon-yui.js" type="text/javascript"></script>

It`s a font file , try to /Hash/ it , and it will work (Y)

OTHER TIPS

It's unclear what the issue is that you are observing, however, simply specifying utf-8 as the character set isn't sufficient to support right-to-left languages. First of all, you should always indicate the language in your HTML (i.e. <html lang="ar">), and you should use the "dir" attribute to specify the text directionality (i.e. dir="rtl").

In other words, for an Arabic page, one would expect your HTML page to start with:

<!doctype html>
<html lang="ar" dir="rtl">

For more info, see:
http://www.w3.org/TR/html401/struct/dirlang.html

Additionally, for right-to-left languages, you'll need to fip your CSS code (i.e. replace "left" with "right", swap the right and left values in combined rules such as "margin" and "padding", etc.) for proper display.

this is not clear what exactly you want.

for arabic langauge you have to define the direction so it will start from right to left.

<!DOCTYPE html>
<html lang="ar" dir="rtl">

you have to use this. In addition I can see the arabic text in my local machine. check hereenter image description here

If you are using

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Try like this,

<li><a dir="rtl" lang="ar" href="index.html">الر ئيسي</a></li>

dir="rtl" means right to left

lang="ar" means arabic

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top