As you can see, I set the alignment to right and put a border to see what is wrong with it. I need to put it in full right
this is the HTML code:
<div class="lol">
<span style="font-size:15px; border: 5px solid red;"> نحن مؤسسة رفيد السعودية, نفيد بأن المذكور أعلاه يعمل لدينا بوظيفة -----------, و ليس لدينا مانع من إيجاره شقة سكنية. ونرجو منكم التعاون معه وتيسير أموره حيث ان اجراءات الاستقدام لعائلته تحت الاجراء . و لقد اصدرنا هذا الخطاب بناء على طلبه و دون ادنى مسؤولية على المؤسسة.
</span><br><br>
</div>
this is the CSS:
div.lol {
text-align: right;
}
Try setting direction to rtl. Alignment is not the same as direction. When you want to output Arabic you have to set the direction to rtl, otherwise the text will be right aligned but the position of commas and other punctuation characters won't be correct.
div.lol {
direction: rtl;
text-align: right;
}
Related
I have a sequence of span elements. I need for them to display inline until an element is reach that should "wrap". The elements that follow the "wrapped" element should continue displaying inline from there. To put it another way, I want an element to display as if it was set to block with regard to the content that precedes it, but display as if it was inline with regard to the content that follows it. Consistent with performing a cr/lf.
The solution must be based on styles only. It is preferable that the only styling change be made to the "startWord" style in the sample code.
The sample below is what I currently have. Word 1, Word 2, and Word 3 should display inline, as they do. Word 4 should display down the page below Word1, as it does. Word 5 and Word 6 display down the page from Word4 due to Word4 display being set to block, but I want them to display immediately following Word4 as if Word4 display was inline or inline-block.
Any assistance would be appreciated.
<style>
.word {
border:1px solid steelblue;
}
.startWord {
border:1px solid red;
display:block; // I want something else here that allows content to display inline after it.
}
</style>
<div>
<span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>
If you're able to edit the html, add a <br/> before <span class="startWord">.
If not, you can add a line break as a CSS psuedo element (as per https://stackoverflow.com/a/17048164/573718), for example before every span.startWord:
<style>
.word {
border: 1px solid steelblue;
}
.startWord {
background: red;
}
.startWord:before {
content: '\A';
white-space: pre;
}
</style>
<div>
<span class="word">Word 1</span>
<span class="word">Word 2</span>
<span class="word">Word 3</span>
<span class="word startWord">Word 4</span>
<span class="word">Word 5</span>
<span class="word">Word 6</span>
</div>
You could do that using float and clear, as I did below:
.word {
float: left;
}
.startWord{
border: 1px solid red;
float: left;
clear: left;
}
.startWord + .word {
/* here any styles for the element which follows the wrapped element could go*/
}
<div>
<span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>
If needed, you can add width: 100% to .startWord to make it full width like a block.
I want to show the English sentence and its RTL language translation like this:
When I try to achieve it using this code:
<section>
<h3>I <span style="color: #42affa;">would</span> like a cup of coffee, please.</h3>
<p style="text-align: right;" class='farsi'>«لطفا یک فنجان قهوه لطف کنید.»</p>
</section>
I get this result:
I think I need to get the end of the English text element and start the position of translation text right there!
Any suggestions would be appreciated...
Note: the English sentence aligned to the center.
UPDATE: using code below:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span>
like a cup of coffee, please.
</h3>
<p style="direction:rtl" class="farsi">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
I get this:
I would recommend using display:flex with justify-content: center on the section element. Then simply wrap the english and farsi text in a div. Align the english text to the right, and set the direction of the farsi text to rtl.
Something like this should work:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span> like a cup of coffee, please.
</h3>
<p style="direction:rtl">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
Try the below code, which will work properly.
HTML
<p>
I would like a cup of coffee, please.
<br>
<span lang="fa">«لطفا یک فنجان قهوه لطف کنید.»</span>
</p>
CSS
p {
display: inline-block;
background: #181818;
padding: 20px;
color: #fff;
font-size: 24px;
}
span[lang="fa"] {
direction: rtl;
float: right;
display: inline-block;
}
When the window gets smaller words jump to another line and white-space between the words become bigger; incidentally the website is in Arabic not in English
I tried to reduce the width of the div that contains them and nothing changed; but I don't know if the problem is the language.
.content {
width: 50%;
margin: 1em auto;
font-size: 20px;
line-height: 30px;
/*text-align: justify;*/
justify-content: center;
align-items: center;
direction: rtl;
}
<div class="content">
<p>
<h1>أهلا بك في SyTech أول موقع خاص في محافظة طرطوس!</h1>
</p>
<p>
<h2> إن موقعنا يساعد في زيادة حركة التجارة الإلكترونية بهدف تطوير مجال التكنولوجيا في وطننا الحبيب سوريا.<br>و هذا يعني أنه بإمكانك استخدام الموقع لعرض البضائع التي تريد بيعها أو تصفح البضائع المنشورة من قبل أشخاص آخرين!</h2>
</p>
<hr>
<p>إن المبرمج الوحيد الذي عمل على هذا الموقع هو تيم زغيبة</p>
</div>
I have the following code to show an image and under the image to show <a> link as follow:-
<div style="float: left;margin-left:8px;max-width:185px">
<img style="height:90px;width:185px" src="******/9854/production/_103969983_gettyimages-939175472.jpg" alt="ntitle">
<br>
<span style="font-size:9px">
<a target="_blank" style="line-height:5px" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>
Here is the result:-
Now the problem i am facing is that i need to minimize the space between the <a> lines. i tried to add line-height:5px but it did not have any effect.so can anyone adivce on this please?
Thanks
line-height does not affect directly elements with display:inline such as is the default with spans and anchor links.
The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element.
MDN
Option 1
Apply the line-height to the div
div {
width: 150px;
line-height: 9px;
margin: 1em auto;
}
span {
background: pink;
font-size: 9px;
}
<div><span>
<a target="_blank" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>
Or Option 2
Set the span to display:inline-block
div {
width: 150px;
margin: 1em auto;
}
span {
background: pink;
font-size: 9px;
display: inline-block;
line-height: 9px;
}
<div><span>
<a target="_blank" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>
You should apply display: block or display:inline-block; when you trying line-height work perfectly with inline element.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="float: left;margin-left:8px;max-width:185px">
<img style="height:90px;width:185px" src="******/9854/production/_103969983_gettyimages-939175472.jpg" alt="ntitle">
<br>
<span style="font-size:9px">
<a target="_blank" style="line-height:5px; display:inline-block;" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>
</body>
</html>
Wrap your text in a <p> tag:
<div style="float: left;margin-left:8px;max-width:185px">
<img style="height:90px;width:185px" src="******/9854/production/_103969983_gettyimages-939175472.jpg" alt="ntitle">
<br>
<span style="font-size:5px">
<a target="_blank" style="line-height:5px" href="https://*********-45937924">
<p>World's longest sea crossing: ******** ****** bridge opens</p>
</a>
</span>
</div>
Now the line-height style will work
I need to set space for each line <br> tag is taking huge.
<font color="white">
ani <br> </br>
hna <br> </br>
Raj <br> </br>
Parya <br> </br>
Sith <br> </br>
Sududa <br> </br>
</font>
Why don't you use <p> tags for each line instead of double <br>s? Or use an <ul>? You'll have more control over the layout.
But if you must use <br> use line-height and only one <br> for each line.
It seems to me that you are trying to close each <br> tag, this isn't possible and instead you are creating two line breaks. Remove one of these and you'll get normal line breaks:
http://jsfiddle.net/LMXNY/
http://jsfiddle.net/QFHPh/
<html>
<head>
<style>
p {
line-height: 1.5em;
}
</style>
</head>
<body>
<p>
this is <br />
a test<br />
of good text spacing
</p>
</body>
</html>
<pre style="color:white">
ani
hna
Raj
Parya
Sith
Sududa
</pre>
By golly, if it looks like a list and acts like a list, it may in fact be a list! Change the bottom margin for the list item to change the spacing between items.
<style type="text/css">
ul {
color: white;
}
li {
margin-bottom: 6px;
}
</style>
<ul>
<li>ani</li>
<li>hna</li>
<li>Raj</li>
<li>Parya</li>
<li>Sith</li>
<li>Sududa</li>
</ul>
You could use line-height property in your CSS.
First thing,
you don't use
<br> </br>
It is only:
<br />
Then on your problem, use the following
<p style="line-height: 20px;">ani
</p><p style="line-height: 20px;">hna
</p><p style="line-height: 20px;">Raj
</p><p style="line-height: 20px;">Parya
</p><p style="line-height: 20px;">Sith
</p><p style="line-height: 20px;">Sududa
</p>
Increase/decrease the number in line-height ('20'px), to increase/decrease the space between the lines respectively.