Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only? (by vertical text, I'm referring to text being rotated counterclockwise 90 degrees)
This is what I have implemented today, which I think should be correct:
.counterclockwise-text {
/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 50% 50%;
/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;
/* This should work for IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */
zoom: 1\9;
writing-mode: tb-rl\9;
filter: flipv fliph;
}
However, IE10 is not ignoring the "\9" CSS hack -- it will pick up those values and rotate the text another 90 degrees. A useful solution would be a way to do vertical text in IE8 and below that will not be picked up by IE10. I really want to avoid having an IE8-only stylesheet, or having a media query to detect IE10. I'm just looking for a way to modify the CSS above to have vertical text in all browsers. Thank you!
EDIT:
For what it is worth, I also tried the code below that uses a filter to rotate the text. This may work for most cases, but in my instance a lot of the text is cut off by the restricted (non-rotated?) constrains of the wrapping element.
.counterclockwise-text {
/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 50% 50%;
/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;
/* IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* IE8 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* IE7 or less */
*zoom: 1;
*writing-mode: tb-rl;
*filter: flipv fliph;
}
I still have not found a way to do this with pure CSS where IE10 and IE8 are happy.
Here is pure CSS ( + 1 extra div for every text ) solution
Works for all IE versions IE7-10
/**
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
*/
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that doesn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(90deg);
-moz-transform: translate(1.1em,0) rotate(90deg);
-o-transform: translate(1.1em,0) rotate(90deg);
transform: translate(1.1em,0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
}
.rotated-text__inner:before {
content: "";
float: left;
margin-top: 100%;
}
/* mininless css that used just for this demo */
.container {
float: left;
}
HTML example
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
</div>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
</div>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>
source: https://gist.github.com/obenjiro/7406727
You should use conditionnal comment for older IEs .
That what they are meant for and it will do no hurts nor hack (ing head) s :)
Having the same problem, but with additional bad readability of the rotated text, I would advice not to use the:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
for IE9 or IE 8.
That's, what worked for me:
p.css-vertical-text {
color:#333;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
}
from http://scottgale.com/css-vertical-text/2010/03/01/
Related
I try to find out the problem but since i'm not css guru I need the help.
I have slider and I try to set custom image on slider-thumb.
The issue is: slider-thumb minimum and maximum position do not reach at the end of range:
This is a demo I play with:
DEMO - try to move thumb bottom-up
This is a code (BTW I use Ionic)
<div class="aa-volume wm-volume-range range" style="position: absolute;top: 3rem;left: 0rem;">
<input type="range" name="volume"
min="0" max="100"
value="{{displayDevice.fan_volume.value}}" ng-model="displayDevice.fan_volume.value" integer
style="max-width: 8rem;width: 8rem;min-width: 8rem;">
</div>
and css:
.wm-volume-range.range {
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
.wm-volume-range.range i.icon {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.wm-volume-range.range span {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.aa-volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 38px;
height: 16px;
border-radius: 0px;
background-image: url('http://www.lesliesanford.com/vst/knobman/files/slider-thumbs/SimpleSliderThumb.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, #a1a1a1)
);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-size: 48px 24px;
background-repeat: no-repeat;
background-position: 50%;
}
Can anybody help to solve it?
The problem is that when you rotate your thumb it keeps its center and it doesn't reach the end of the track. If you don't rotate it, it works
The easiest way would be to rotate the file image before setting it as the background-image of your range thumb.
Otherwise, you can create a custom thumb and move it to follow the real hidden cursor. You can see an example here (the second range).
I want one div in my page whose position will be fixed rotation is 30 degree but when I am doing this its shows like this
I Don't want that empty space in the top while rotation. I want Top same as bottom currently in top its showing some space when i rotate my div.
CSS is
#beta{
position:fixed;
bottom:0;
padding:-30px;
z-index: 1;
width: 15em;
height:3em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
You can add transform-orign, which will act as rotating axis.
And if you want this to be at top then add top and remove bottom value and while rotating, the blocks shifts so give left value to the half of its height of appropriate value.
#beta{
position:fixed;
top:0;
z-index: 1;
width: 15em;
height:3em;
left: 1.5em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: left top;
}
And one more thing, padding doesn't work with negative value. :)
Have a nice code day.
Take a look at the transform-origin CSS property if you want to set the point at which the object rotates around. In your specific example, the reason there is so much space above is because you've set bottom: 0, which will force a fixed element to snap to the bottom of its parent.
I'm not sure the exact layout you're looking for, but here is something with less white space at the top:
#beta {
position: fixed;
z-index: 1;
width: 15em;
height: 3em;
background: #65a9d7;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
margin-top: 4em;
}
<div id="beta">
Beta Version
</div>
Edit: The following snippet is a follow-up to a comment from the original poster.
.container {
border: 5px solid #000;
height: 5em;
overflow: hidden;
position: relative;
width: 15em;
}
.beta {
background: #65a9d7;
height: 3em;
line-height: 3em;
margin-top: -1.5em;
position: absolute;
text-align: center;
top: 50%;
width: 15em;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
}
<div class="container">
<div class="beta">
Beta Version
</div>
</div>
I have the following css code snippet for creating a diagonal box with text inside. I would like the top to appear flat (a parallelogram), yet preserve the diagonal nature.
.diagonalTextBox {
color: black;
background-color: #fff;
width:50px;
height:20px;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */
}
You could try this:
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
but that would also distort the text...
JSBin demo here.
How can I position a div rotated 90 degrees on the right edge of the page, centered vertically? Thanks in advance.
Try this:
div {
font-family: sans-serif;
background: red;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
position: absolute;
width:200px;
height:20px;
top:50%;
margin-top:-20px; /* height */
right:-200px; /* width */
}
div{
vertical-align:middle;
float:right;
/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Check this, may help you a bit.
I have some text in a div which is also in divs for having a double borders around it.
You can see it live here: http://jsfiddle.net/43y46/
I would like to place a text rotated 90° at bottom right of it.
Something like this:
My rotated text should be placed in the blue space on the screenshot.
Can you help me?
Thanks.
As discussed here Use this style for your text span.
.rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
Done! :)
http://jsfiddle.net/43y46/1/
Something like this?
http://jsfiddle.net/43y46/5/
Here is my solution
<div id="content">
<div class="outer-gray">
<div class="inner-gray">
#RenderBody()
<div class="rotate">Text rotated here</div>
</div>
</div>
</div>
And the CSS
.rotate
{
position: absolute;
right: -20px;
bottom: 5px;
font-size: 10px;
color: #cccccc;
padding-top: 70px;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}