I am hoping someone can advise before I lose all sanity!
Someone is graciously translating my website into Farsi and sending me the text in Word format (reads perfectly as one would expect) but when I copy it into Dreamweaver CS6 is goes awry. For example parenthesis COLOR=#ff0000[/COLOR] is replaced by )text( as well as exclamation marks ending up in the wrong place completely. If the pages were just Farsi it’s simple but I have mixed Unicode characters and there doesn’t seem to be a setting within HTML5 for bidirectional; that I can see. I am clearly out of my depth here, I freely admit that.
- I am importing the Arabic font within CSS to display the Farsi text correctly (but do I also require Western fonts listed within CSS?)
- I have created a specific CSS file just for Farsi, else it reads in reverse with the exception of Western fonts.
- I have the main template set as dir=“rtl” (I know this is causing Western characters to reverse, but I don’t know how to fix it)
I am not a web designer, this is just a hobby so I don’t fully understand code and learning the hard way. If there is anyone who could advise would be very greatly appreciated.
Many thanks in advance,
Lee
There are several things going on by the sounds of things. I assume you know how to use SPAN if it is just a few words that need putting back to LTR or vice-versa. This might point you in the right direction. http://www.w3.org/International/questions/qa-bidi-css-markup
Hello Robert,
Many thanks for your reply and the link. I did visit that page but just confused me more; I need to see examples of the code to understand. As it’s only a few words I guess SPAN should do that but am I right assuming the following on Western characters?
<span class>=“dir=ltr”>Any Western Text</span>
I ask as I cannot see any examples online with reference to text direction using Span. Would it help if I posted the header and CSS to make sure I am not causing further issues?
Many thanks for your assistance,
Lee
Well, it cannot harm if you send an example of the page in question to get a better idea of what is being applied.
Many thanks James,
Template:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="../twoColLiqRt.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../print.css" rel="stylesheet" type="text/css" media="print" />
<link href="../media2.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="doctitle" -->
<title> سه شنبه لوبسانگ رامپا</title>
<meta name="Description" content="همه جانبه اي، وب سايت چندزبانه ى معنوى، مختص به ماوراءالطبيعه دانش و آموزه های سه شنبه لوبسانگ رامپا." />
<meta name="Keywords" content="هاله، علوم غريبه، معنوى، وسط راه، روح می خوانيد، مسافرت، دودكشهاي افراخته، تفكر، تنجيم، تناسخ، نماز، پيشگويي، مواد مخدر، کوششی، سنگ محك، مابعدالطبيعه، زمين های توخالی." />
<!-- TemplateEndEditable -->
<meta name="copyright" content="Tuesday Lobsang Rampa" />
<meta name="distribution" content="global" />
<meta name="rating" content="General" />
<link rel="shortcut icon" href="http://www.Lobsangrampa.org/rampa.ico" />
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" -->
<meta name="viewport" content="width=device-width">
<!-- TemplateEndEditable -->
<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url("../webfonts/arabic/stylesheet.css");
body,td,th {
font-family: arabic;
}
</style>
</head>
[B]CSS:[/B]
@charset "UTF-8";
body {
font-family: arabic;
direction: rtl;
font-size: 18spx;
background: #FFC;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
h1 {
color: #630;
text-shadow: 2px 2px 0px #C90;
}
body {
background-color: #FFC;
}
a img {
border: none;
}
a:link {
color:#9900FF;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 100%;
max-width: 2560px;
min-width: 780px;
background: #FFC;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: right;
width: 13%;
padding-bottom: 10px;
background-color: #C90;
}
.content {
padding: 10px 0;
width: 87%;
float: right;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #C90;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #FFC;
color: #A60;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
I am hoping you will discover an obvious error which can be easily corrected, even someone with my low skills in web design, as I do plan to create a new website in the latter part of this year using Fluid Grid Layout.
Many thanks again
Lee
You should add dir=“rtl” to the html tag any time the overall page direction is right-to-left even though Unicode is supposed to sort that out. In HTML you should use markup as directionality it is an integral part of the document structure and needs to be persistent.
Since the file will be saved as UTF-8 any English characters should read normally though I don’t know about “cross browser” support? I cannot read Arabic myself so don’t know if the font glyphs are displayed correctly in your pages. Albeit if you are getting weird rendering with the English parts you’d need to post a code sample. As the above CSS is only covering direction - not any content or structure.
Assuming the default language is Arabic.
لا أتكلم العربية
An extremely crude rtl text direction version (using markup) would be similar to the following:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=
"ar" lang="ar" dir="rtl">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8" />
<title>
Test File
</title>
<style type="text/css">
/*<![CDATA[*/
body:lang(ar) {
font-family : "Traditional Arabic", serif;
}
/*]]>*/
</style>
</head>
<body>
<p>
لا أتكلم العربية
<p>
</body>
</html>
Obviously for a separate CSS file you have to consider direction and how the layout and block elements themselves flowed. UTF-8 would be in play here for simplicity.
Hello Robert,
Once again many thanks for your assistance. I have been considering the possibility of just using Arabic without any western characters but I need to talk with the person translating Arabic to get her view, but it’s a fall-back if all else fails. I cannot also read Arabic, so I get the person translating Arabic to validate; without wanting to be rude, for most Westerners it will seem a mass of meaningless squiggles.
I have noticed that you are using “XHTML 1.0 Strict//EN” and then set an additional language(?) and text direction.
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang= “ar” lang=“ar” dir=“rtl”>
I am going to use your code on a blank website in the hope it resolves my problem, I will let you know either way. W3C does offer a tutorial (http://www.w3.org/International/tutorials/bidi-xhtml/) and explains the direction of text should be based on the “bidi algorithm” but it goes haywire then displaying characters with “neutral directional properties”, so it’s not an easy task.
Kind regards,
Lee
Hello Robert,
I have tested a new webpage with your code to mixed Western and Arabic text copied directly from Word. Whilst at first I thought it had failed, parenthesis showing in reverse )( but when viewed within a browser it works 100%. Your masterly efforts have removed one huge headache for me. Albeit you said “an extremely crude rtl text direction version” doesn’t matter one iota because it does what it claims to do very well :D:D:D (first class)
I just wish there was a button to credit/highlight your skills in resolving my problem.
Many thanks indeed,
Lee