My Arabic text turns into dots
ex: لعبة سوبر ماريو
Became: لعب....
I have tried to add Direction:rtl;
and Text-overflow:clip;
But the issue remains this is the current css settings
[class*="gmcn-smal"] .gm-titl{line-height: 20px;font-weight: 700;font-size: 12px;}
By the way it's working fine with English characters
Works for me:
#s2 { color: red; }
div
{
direction: rtl;
}
span
{
}
JSFIDDLE DEMO
Related
I'd like to have the following written in css where the underline is positioned lower down than the other letters.
Almost like a vertical indentation
co_defy
It would be great to have the dash at the same level as the bottom of the y.
Is this possible?
Simply adjust vertical-align of the underscore
body {
font-size:60px;
font-family:arial;
}
span {
vertical-align:middle;
}
co<span>_</span>defy
You can also use custom values to adjust like you want:
body {
font-size: 60px;
font-family: arial;
}
span {
vertical-align: -0.1em;
}
co<span>_</span>defy
Use the text-underline-position property in CSS. Like so:
.example {
text-decoration: underline;
text-underline-position: under;
-ms-text-underline-position: below;
}
As you can see, IE and Edge have a different syntax for the property. Hope this works!
Another way to do it is as such:
body {
font-size: 50px;
}
span {
vertical-align: middle;
}
co<span>_</span>defy
I want to open a subbreddit in hebrew and i want to "mirror" the site using the css sytlesheet so it will fit nicely with the hebrew. I want that the tree structure of the comments will be aligned to the right.
here is an example of what i want to achieve:
before:
image1
after (with damaged text):
image2
so, i want to make the structure of the site to look like in image2, but without damaging the text.
is it possible?
update:
here is the css code that i have right now:
there could be non-relevant selections, i'm just experimenting withe the stylesheet by trial and error:
.thing {
display: inline;
}
.sitetable {
display: inline;
}
div.content {
display: block;
float: right;
}
body {
direction: rtl;
}
.midcol.likes {
float: right;
}
Update2: solved!
i added this line and it fix it:
.child {
padding-right: 25px;
}
solved! i added this line and it fix it:
.child {
padding-right: 25px;
}
I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.
The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.
Any Ideas?
Thanks.
You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)
http://jsfiddle.net/3dk48/8/
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.
Remove the below code from .back style
position: absolute; // not need
margin-left: 2%; // not need
then the problem can solved.
EDIT:
also make change here..
.back:active {
/* position: absolute;
top: 1px; */
color: black;
}
fiddle: http://jsfiddle.net/3dk48/9/
use this:
.back{
top:32px !important;
}
body{
position:relative;
}
Only IE shows the img.png image mirrored. Why? How do I cope with it without creating a mirrored image specifically to IE?
body {
direction: rtl;
}
li:before {
content: url(/img/img.png);
}
Fiddle: http://jsfiddle.net/Txza7/2/
Well, Problem solved: I had to set direction: ltr ruler to li:before in order to get it right.
body {
direction: rtl;
}
li:before {
content: url(/img/img.png);
direction: ltr;
}
I have the following:
<p>This is a test</p>
<pre>public class Car {
protected Car() { }
protected Car(int speed) { }
protected void Car() { }
}</pre>
<p>Another line</p>
and
pre {
font-family: monaco,consolas,"courier new",monospace;
font-size: 1em;
min-height: 3em;
overflow: auto;
padding: 1em;
xwidth: 80%;
background-color: red;
}
When the text displays the <pre> background goes the full width of the page. I have a demo here:
fiddle
What I would like is for the red background to stop just after the far most right character of my code. I don't want to see a big red area that extends from one side of the page to another.
Can someone tell me if it is possible to do this with CSS. I really am not sure as I cannot think what I can do.
Thanks
You can use display: inline-block;:
http://jsfiddle.net/hLVV9/1/
Although please check out the browser support, because it wouldn't surprise me if IE doesn't support it.
The best solution so far :
pre {
white-space: pre-wrap;
}
You can use float:left and a clearing div to achieve this.
http://jsfiddle.net/hLVV9/2/
For that behavior you will need to float your <pre>. Floated blocks of course cause some layout changes, so you need to wrap it in another clearing block element:
<div class="pre-wrapper"><pre>Lorem ipsum</pre></div>
.pre-wrapper {
overflow: hidden;
}
.pre-wrapper pre {
float: left;
}
Adding display: inline-block should do it for FF, Safari and Chrome.
But make sure to check in all browsers and how it behaves, specially IE
One more approach:
pre {
display: table;
border-collapse: separate;
}
It allows the margins to natively collapse (in contrast to display: inline-block). As a bonus, it works with a wide range of browsers starting with IE8 or even older.