here is my Work http://jsfiddle.net/2h8tv/
Here i am using css transform: rotate(90.0deg) . You can see the text coming out of the container. How can solve this without using padding or margin
I think that using transform-origin should be the most proper thing in this case. When you rotate an element with transform: rotate(x), the rotation is done by a specific origin. By default, this origin is set to 50% 50% which is the exact center of the element.
Add the following style to .rotate class
-webkit-transform-origin: 8px 12px;
However, you can make this rule more general:
-webkit-transform-origin: 50% 12px;
First part of the property is vertical position of the origin point. So in this case we set it to middle (50%). The second one defines horizontal position of the origin, so depending on parent div's width we should set it in px.
You have a few options here, obviously just adding padding would be the easiest.
But you can also mess with the transform-origin policy.
transform: rotate(90deg); transform-origin:8px 12px;
-ms-transform: rotate(90deg); /* IE 9 */
-ms-transform-origin:8px 12px /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-webkit-transform-origin:8px 12px /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin:8px 12px /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin:8px 12px /* Opera */
See and example here http://jsfiddle.net/2h8tv/2/
You could use a non-breaking Space
<div class="orangeblock "><div class="rotate"> Free</div></div>
<div class="yelloblock"><div class="rotate"> $1999</div></div>
Check -> http://jsfiddle.net/2h8tv/1/
If you increase the font-size of .rotate. it will get aligned.
Related
Using the css attribute transform: rotate(); works fine but when using it under horizontally oriented text it displayed outside of the div but I want it to display it within. I tried a lot with the display, position, left, top, float etc. attribute but nothing worked. Any ideas?
Here is the css-code for the vertical text:
width:130px;
height:50px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
Here is the example to try:
http://jsfiddle.net/ty6Zj/
You should use transform-origin property for that
transform-origin: 40px 20px;
Demo
Note: You've used all proprietary declarations for transform, should use a standard one as well..
transform:rotate(270deg);
Also, make sure you have this at the end of the proprietary properties...
I'm trying to skew some text that sits within a div, which is all nice a straight forward, but I am trying to find a way to keep each line completely left justified to one side of the div, as currently the first few lines sit in so many pixels and the last few lines overflow out. The font we're using is already italic but we want to push it a little more with the skew, I know it's not going to look perfect but it works for what we want.
Is there a way to do this? I've tried searching one out already but I'm not sure if I'm looking for the right thing or it's something that's nobody bothers doing.
Heres a basic JSfiddle
and an awful mock up... bad mockup
and the basic code to test it out...
Here is the CSS:
.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
And the HTML:
<div class="box">
<p>Text here - more in the fiddle</p>
</div>
Thanks guys!
This may be a silly question, but are you simply wanting italic text? If that's the case, and your font is italic by default as you say, simply remove the skew completely and give your .box p selector font-style: italic:
.box p {
font-style: italic;
}
JSFiddle demo.
If you are wanting the text's container to be skewed, however, what you can do is introduce a container element and apply the skew on that:
<article>
<p>...</p>
</article>
.box article {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
Now simply counter that skew on your p element by skewing the same amount in the opposite direction:
.box article p {
font-style: italic;
transform: skew(20deg);
-ms-transform: skew(20deg); /* IE 9 */
-moz-transform: skew(20deg); /* Firefox */
-webkit-transform: skew(20deg); /* Safari and Chrome */
-o-transform: skew(20deg); /* Opera */
}
Here I've again added font-style: italic to make the text render italic.
JSFiddle demo.
To change a web page CSS to be RTL from LTR I have to set or invert the following CSS properties:
body{direction:rtl}
any float:left should be float:right and Vice versa
any padding or margin regarding left or right should be reversed
In addition any images should be inverted horizontally.
My question is: are there any more CSS properties should be changed?
text-align, background-position, border positions, left and right positions, basically anything and everything that has a horizontal property.
If you would like to do it by hand, you may go through a list of css properties such as this one, but personally I would look at using one of the online tools to get started.
CSSJanus is usually pretty good, though I am sure there are more out there if you google it.
Best of luck.
Are you just trying to use right-to-left writing, or are you trying to mirror the webpage?
body {
transform: scaleX(-1);
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
This will produce a mirror image of the webpage, but everything still works as it should (links are clickable in their new positions, for instance)
Another few properties...
box-shadow and text-shadow
/* multiply the first value ( horizontal offset of the shadow) by -1 */
`box-shadow: 5px -5px 5px 5px #abc;`
becomes
box-shadow: -5px -5px 5px 5px #abc;
and
text-shadow: 2px 2px #FF0000;
becomes
text-shadow: -2px 2px #FF0000;
2: border-radius
You need to be careful with this one as changing the values to achieve rtl works differently here
border-radius:25px 0px 0 25px;
becomes
border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)
Also, here are a couple of tips:
Horizontal Positions as Percentages
If you have a style like:
.style
{
position: absolute;
top: 22%;
left: 32%;
...
}
the left property would become 100-32=68%
2. background-position: Horzontal Value in pixels - eg:
background-position: -34px -85px;
In such cases you will have to work this out manually. (See this article)
As a reference:
Here's a great article about about converting a website to rtl
actually, the entire website http://rtl-this.com deals with rtl issues so can find lots of useful stuff there
You may try;
body {
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Operah */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
}
This will make a mirror effect. Here is a Live Demo.
You may try rtl if you want to flow letters from right to left and may use just text-align: right if you want to float items to right.
If you want text to begin from the right, you may try;
body{
unicode-bidi:bidi-override;
direction:rtl;
float: right;
}
Here is the Live Demo;
I have a div with a heading inside it that has been transformed with CSS to be rotated -90 degrees so it appears vertically.
#mydiv h2 {
writing-mode: tb-rl;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space: nowrap;
width: 20px;
height: 20px;
}
The problem is that the containing div doesn't stretch with the text; instead, the text floats outside the div box.
How can I make the div stretch with the text?
Try setting width: auto; and transform-origin, but on the containing div - like this:
div {
writing-mode:tb-rl;
transform: rotate(-90deg);
transform-origin: top left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
display:block;
bottom:0;
position: absolute;
outline: solid 2px green;
width:auto;
height:20px;
}
h2 {
margin-top: -5px;
background: pink;
}
You can see it in action here: http://dabblet.com/gist/2725392
Hope this helps!
For an approach with transform, see this answer of mine to a similar question: https://stackoverflow.com/a/47860039/1709587
Alternatively, just using writing-mode: vertical-lr (or the deprecated writing-mode: td-lr) seems to work fine in modern versions of Chrome; the containing div will correctly accomodate the h2 within it, and no transforms are needed. See the example below:
#container {
/* Pink background for easier visualisation of the end result */
background: pink;
/* Optional; shrinks width of div to minimum required to contain h2 */
display: inline-block;
}
#container h2 {
/* Note that the td-lr value used in the question is deprecated;
vertical-lr is the modern equivalent. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Consider also using
-webkit-writing-mode: vertical-lr
and
-ms-writing-mode: td-lr
for compatibility with older browsers. */
writing-mode: vertical-lr;
/* Optional; flips the heading, so that it is written bottom-to-top
instead of top-to-bottom.
Consider also using -webkit-transform and -moz-transform and
-o-transform and an equivalent transform with filter for compatibility
with old browsers.*/
transform: scale(-1, -1);
/* Optional: disable breaks in the title */
white-space: nowrap;
}
<div id="container">
<h2>Some text</h2>
</div>
<div>
More stuff
</div>
However, you'll find a slew of layout bugs if you try to get this working on current (December 2017) versions of Firefox, Edge, or Safari; the four major browsers have fairly broken handling of vertical writing-modes at the moment. They're not consistent with each other, and they're frequently not even deterministic - you can toggle a style rule off and on again at the dev tools and end up with a differently laid-out page. As such, while this approach is an option, beware using it and test extensively if you do.
You have to target the div size and not the h2 size add the below code and check.
#block-views-archive-block {
height: 20px;
width:20px;
overflow: visible;
}
What if you just transformed the div instead of the text, believe by doing that, it will also transform the div's contents.
you could also set the height to auto.
or you could just try increasing the height manually by adding the necessary amount of pixels.
I hope one of these solutions works!
-Brian
well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.