I'm building a webpage from PSD. At there, I've seen some little bit curved text.
Look the above 3 images. They aren't the straight line. They're little bit curved/oblique/awry. So, how can I make that text by CSS?
It seems like a skew transformation would do the job: CSS3 skew at MDN
When you look closely, the baseline of the text is not curved but rotated. This transformation can be done with:
transform: rotate(5deg);
Be sure to support all browsers, e.g.:
-webkit-transform: rotate(5deg);
Using CSS3 transforms. Make sure your target browsers support it: http://caniuse.com/#feat=transforms2d
Also, you might need to use prefixes to make it work in all browsers.
<p>Texty ipsum</p>
<style>
p {
transform: rotate(-4deg);
}
</style>
Related
I have a jpg image that was taken vertically and saved that way. It appears as it should (vertically-oriented) in Windows Explorer:
I've got this HTML/Spacebars to display it in my Meteor app:
<template name="nfnoscarsdonut">
<p>Here's a picture of NFN Oscar's microscopic Donut, which we had to eat because he pulled a "George 'No Show' Jones" again</p>
<img src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
</template>
...but it displays in "landscape" (rotated 90 degrees to the left), as you can see here:
What do I need to do to get the image to straighten up and display right (vertically)?
There seems to be no orientation property for the img tag
I'm not familiar with Meteor and this is just a guess. Maybe the JPEG file has its EXIF rotation property set which Windows Explorer is reading and using to "soft-rotate" the image for display and which the browser when referencing the image is simply ignoring (or vice-versa).
The simplest option might be to rotate the image using CSS as described here.
If you open the image in an image editor you can see if the image is rotated or not and if not then rotate it and see if that has any effect on its display on the web page.
Or you could view the EXIF properties of the file with an application such as one mentioned here.
A last resort could be to try to rotate the image according to its EXIF property with JS as described here, though that still assumes it has something to do with EXIF.
Whatever it is I think it has something to do with the file and/or its metadata rather than the HTML used to reference it, but since I don't know what other HTML or CSS may be being applied to the tag I may be wrong about that.
Hope that helps!
The link pjrebsch gave pretty much worked. For whatever reason, I also had to add a margin-top value. The code is now:
HTML (added rotate class):
<img class="rotate" src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
CSS:
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
margin-top: 88px;
}
I'm just doing codeschool and they told me:
SORRY, TRY AGAIN
transform must be defined last, after the browser prefix styles.
and here is my code:
img:hover {
-webkit-transform: translate(10px,20px);
-o-transform: translate(10px,20px);
transform: translate(10px,20px);
-moz-transform: translate(10px,20px);
}
As I always do I start to playing with my code and discover that I don't need this line of code:
transform: translate(10px,20px);
at all! Everything is working without it! Then I tried to delete all these stuff
-webkit-transform: translate(10px,20px);
-o-transform: translate(10px,20px);
-moz-transform: translate(10px,20px);
and leave
transform: translate(10px,20px);
only. What a surprise! it doesn't work! So here is my first question:
Why do I have to define line transform: translate(10px,20px); without -o-/-webkit-/-moz-
if it doesn't work at all?
and than second:
WHy codeschool tells that
SORRY, TRY AGAIN
transform must be defined last, after the browser prefix styles.
Why?
CodeSchool is forcing you to use a CSS best practice. This one is has a good reason: future-proofing. Why/how?
CSS3 isn't quite standard yet, but that hasn't stopped the people at Google or Mozilla from trying to implement the features. Problem is, since CSS3 is changing, those guys aren't quite sure how it works. To get around this, the non-standard prefix notation (-moz- or -o- rules) were created as transitional rules to use while the CSS3 spec is slowly finalized.
But this created a new problem: "what to do with these rules once CSS3 is finalized?" That is what the 'Cascade' in CSS is for: rules lower-down take priority over those higher up. By adding the 'standard' rule below the extension ones, it will override the browser-specific ones only when the browser supports it.
Thus, we can use features bleeding-edge browsers today, while being ready for the standards tomorrow, and do it with the same CSS file!
the -o-/-moz- etc.. are browser specific declarations which are in place to allow browsers that don't support the native property but have their own implementation.
You should always have the regular property without the prefix. Prefixes are only their to extend the range of browsers that will apply the property.
The specific order of the properties will have no effect on the page output, however depending on how strict a validator is it may tell you that it's not valid unless the unprefixed property is written last
I am building a multi-lingual website. Some languages (like Hebrew) read from right-to-left. Besides the actual text, those users are used to having navigation and other visual clues reversed.
For example the main menu on top would be aligned to the right. "back" button would point forward, logo on the top right instead of top left, etc.
One solution is of course to create a whole new design, however that would mean I'd have to maintain 2 templates. Not ideal.
I was just thinking, would it be possible to flip the entire design in CSS? Like looking in a mirror?
I'm also opened to better solutions if this seems far fetched.
Technologies used: PHP, Yii, Less.css, jQuery
It is possible to flip the entire site exactly as you describe with but a few lines of CSS see here: http://jsbin.com/aduqeq/5/edit
CSS:
body {
margin: 0 auto;
width: 300px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
There are a few downsides to this approach however:
1) While it works Fine in Firefox + Chrome, it only sort of works in IE8+ (the text looks very strange to me in IE) expect support to be a bit patchy (this is a new CSS3 feature)
2) There are obvious semantic disadvantages here
3) Some people seem to have a thing about vendor prefixes
Overall using RTL on the body and using a different stylesheet might be a much better alternative here, even thought it's more cumbersome for you, the end user is provided with a better experience (unfortunately the quick fixes we want aren't always available)
A lot of sites consist of a menu bar and a content area. These are usually the main areas of focus for flipping. Should be easy with 3 lines of CSS :
html[dir="rtl"] #menu {
float: right;
}
This same CSS code can easily be adapted to match other areas that should be moved. There's really no need to maintain 2 sets of templates, unless you hardcoded coordinates (which was a bad idea anyway).
Of course, make sure to set <html dir="rtl">
html {
direction:rtl;
}
This will reverse everything on page from right to left. You need to adjust this for every element in your page.
You can try:
body {
direction:rtl;
}
But that would just give you a starting point to start from...
Hope it helps.
The developers of MediaWiki, the software that powers Wikipedia in hundreds of languages, developed a tool called CSSJanus, which can cleverly flip your CSS on the fly for right-to-left languages:
https://github.com/cssjanus
This is successfully used for Wikipedias in right-to-left languages, and as a result they require very little duplicate maintenance of CSS.
You can flip the entire website using Seandunwoody his answer but that would reverse the text and icons and images and such as well.
Provided that you place your content in <p> and <h1> 2 and 3 tags, which you do not put into each other (so no <p><p></p></p>) you can apply the css like this:
body,p,h1,h2,h3 {
margin: 0 auto;
width: 300px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
What it does is basically the double mirror trick, it mirrors the complete website and then it mirrors all the small paragraph and titles which contain your text and images back to the original orientation but still in the position of the reversed website.
Hacky but it works (not so nice on IE though).
*You also need to add the dir='rtl' to the html or body tag to make sure the text is alligned to the right and hebrew is reversed (english characters will stay left to right but allign right).
There is a great Magic Tool for that called rtlcss
TLDR;
long time ago, I got away with doing the following:
1. if an element has a direction:rtl -> remove it
2. if an element have no direction:rtl -> add one
in most cases, add direction:rtl to body
4. if element has align:right/left' -> switch left/right
5. if element hasmargin-right/left` -> switch left/right
Limitations which are not handled:
1. Statically placed elements may not be placed right
2. Relative placements may not be placed right
3. Styles in the HTML should be taken care of (if exists, suggest to move into the CSS)
be careful if you plan on using Find & Replace as right & left can be found in mysterious places.
e.g. .copyright { ... } can become .copyleft { ... }
Searching today (Jan '18) i found this great tool that do all the above for you:
Take a look at RTLCSS Website
I used it as command line, as i needed to RTL a library CSS i had once, but it can be bundled in your build steps.
I agree to Sean's answer, it actually works! But there's one thing I'd like to mention: he needs to remove the "margin" and the "width" in order to make the page more readable but still flipping.
body { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
I would like to know whether it is possible or not to create text in a web page at an angle, for example at 40 Degrees. If it is possible, how can I do this?
EDIT: Finally, I decided to go with Mathias Bynens's answer.
Use CSS3 transforms:
.selector {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
IE does support filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);, where the rotation property accepts one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. It’s a filter though, so I wouldn’t recommended using it.
To add to Mathias' answer, you can rotate text in IE, too: http://snook.ca/archives/html_and_css/css-text-rotation
However, you are bound to multiples of 90°.
Apart from that you could utilize SVG/VML for rotated text. Look, for example, at this page: http://raphaeljs.com/text-rotation.html
It uses the RaphaelJS library for cross browser text rotation without images.
Mathias is right in his answer, but to also support IE you can use their filter:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/
Then IE will be supported too :)
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here