i write a program to show arabic text.
i use two type of font:
1:a font with out Arabs
2:a font with out text
i can change each color separately with this method.i used two span tag with the same id for showing text with arab and text with out arab on each other.
result:
every thins is ok.
but when i change text-align to justify it dont work good and the text goes out.
result:
a part of code:
<span class=ThuithQA id=1-0> <font size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithE>
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithQA id=1-1> <font size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font></span>
i wnt to show text justify.
If every verse is in a separate span then set your css as given below:
EDITED:
CSS
span{
display:block;
text-align:justify;
direction: rtl; /* Direction of text right to left */
}
See this Demo:
http://jsfiddle.net/rathoreahsan/mSEj9/1/
If you want to show all text justify, you need a wrapper over all span and this styles:
.wrapper {
direction: rtl;
text-align: justify;
}
You can't align text justify in each span, because they havn't text for full line + some simbols
Try setting the spans to display:block or set widths
I could Solve my problem with this code:
i put arab and text in a seperate div
and set div
posation:absolute
and set body
text-align:justify;
a part of code
<div style=" position:absolute;">
<span class=ThuithQA id=1-0>
<font size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font>
</span >
<span class=ThuithQA id=1-1>
<font size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font>
</span >
</div>
<div style=" position:absolute;">
<span class=ThuithE>
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font>
</span >
<span class=ThuithE>
<font color=Red size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font>
</span >
</div>
result:
Try text-align to right.
span{
display:block;
text-align:right;
}
Related
i created buttons with shortcodes, and i need to add icon before the first text like this http://s32.postimg.org/codndv6s5/Bez_n_zvu.jpg
here is the shortcode
[button iconurl="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/child.png" title="Děti" description="Rozcestník pro děti a mladistvé do 15 let" marginright="0%" width="45%" iconalign="top" textalign="center" align="left" url="http://www.yakna.cz/neuroportal/cat/deti/" bgcolor="#00968f"] [button iconurl="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/man.png" title="Dospělí" description="Rozcestník pro dospělé" marginleft="0%" width="45%" iconalign="top" textalign="center" align="right" url="http://www.yakna.cz/neuroportal/cat/dospeli/" bgcolor="#00968f"] [rule type="clear"]
and here is the site >http://www.yakna.cz/neuroportal
i try to add css float:left, display:inline-block but not help
please advise, thanks
this page could help you: How to align inline image with text?
If not, try to set floating:left to your "Dospělí" icon.
I played around with css in console and this should work for you. Remove the span class icon and add the image directly with the text and align image in middle vertically After this you will need to increase top padding of span class text accordingly
<span class="wrap">
<span class="text" style="text-align:center;padding-top: 10px;/* display: inline-block; */">
<span class="title" style="">
<img src="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/child.png" alt="button icon" class="load-finished" style="
vertical-align: middle;
"> Děti </span>
<span class="description" style="">
Rozcestník pro děti a mladistvé do 15 let</span>
</span></span>
This is how it looks :
Following is my fiddle in which I am trying to vertically align the text with Icon Font. Kindly let me know what's an appropriate way to do such alignment:
How can I vertically align the font icon with the text on this fiddle
Wrong output:
[ICON]Text
Text Text
Expected Output:
Text
[ICON] Text
Text
You can simply make the icon float (bootply #1):
.panel-title .glyphicon {
float: left;
margin-right: 10px;
}
but I prefer using Block Formatting Context (BFC) properties when it comes after a floating element (needs an extra element to enclose your text). It basically creates a column along your float instead of letting your text wrap around it as usual (bootply #2):
HTML:
<a href="#collapseFour">
<span class="left mr1 glyphicon glyphicon-file"></span>
<span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>
CSS:
.left {
float: left;
}
.bfc {
overflow: hidden;
}
div it.
put the icon in a separated div, like this:
<div>
{icon}
</div>
<div>
{text}
</div>
and put them inline. display:inline-block... this should work.
you can make a little table like this
<table>
<tr>
<td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
</tr>
</table>
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container
I have this:
http://jsfiddle.net/8KWtH/
I would like to move the > so it is in the middle vertically of the two images.
How can i do this?
Use line-height to accomplish this:
<span style="font-size: 34px;line-height: 79px;"> > </span>
EDIT:
Because of the nature of the images, you need to use vertical-align to accomplish this:
<div style="float: left;">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" style="width: 60px; height: 79px;vertical-align: middle;">
<span style="font-size: 34px;"> > </span>
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" style="width: 60px; height: 79px;vertical-align: middle;">
</div>
You can set your images to have vertical-align:middle; but that will make the > start from the middle. so it will still go up a little.
example: http://jsfiddle.net/8KWtH/14/
Applying the vertical align to the span as well makes it perfect.
example: http://jsfiddle.net/8KWtH/22/
I'd start by using the following instead of >.
>
I whipped out something here
From what I can see it is basically a variation on the other answers but it gets the job done
why is the word BESTSELLER skipping a line... there is nothing in the code telling it to do so? (forgive me -- here is the link http://u.neighborrow.com/)
<div class="input text required">
<label for="ItemItem"></label><input type="text" id="ItemItem" value="" maxlength="255" style="font-size: 25px; width: 200px; margin: 5px 0pt;" name="data[Item][item]">
<input type="submit" value="Search" style="font-size: 22px" />
</div>
<?php echo $form->end(); ?>
Tips: <span style="font-size: 13px; position: relative; top: -2px"> Taking a trip? Want to try something before you buy it? <br > Have a project or event coming up? Want to see who has a copy of that bestseller?</span>
<br />
<?= $form->create('Item', array('action' => 'indextest')); ?>
</div>
I do not know what you mean by "skipping a line". Perhaps a link to the live code would help. But I did notice you have more closing div tags than opening.
EDIT: It appears the surrounding div has a computed line height of 30px. But the subject span has a line height of 18px. So, when the span takes up an entire line, it displays at the 18px line height. But when it only takes up a partial line, the 30px line height is applied to the remainder of that line, and this causes the last line to display at the larger 30px line height. Try setting the 18px line height at the parent div, or set the span to be display: block, so that the larger line height is not displayed in-line.
Try to add display:block to your span or replace the span width any block-level element such as <p> or <div>. In a semantic world you should use a <p> ;)
Also you should try to prevent inline-styles.