[Translation] Use CSS for text Rotation

[Translation] Use CSS for text Rotation

Address: http://snook.ca/archives/html_and_css/css-text-rotation

Http://www.cnblogs.com/AndersLiu/archive/2009/07/29/css-text-rotation.html.

Translation: Anders Liu

Abstract: I have been inspired by other people's articles. Here is another example. This is -- text rotation.

Once again, after reading somebody else's article, I felt should red to put together an alternative example. In this case: Text Rotation.

I am deeply inspired by other people's articles. Here is another example. This is -- text rotation.

Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. well, maybe not so much a sprinkle. it's like the top fell off the pepper shaker and you 've suddenly got a large pile of pepper on your food. it makes me want to sneeze.

In the previous article provided by the hyperlink, the example uses Image Sprite and a small amount of CSS for accurate positioning. However, this amount may be large. It's like shaking the pepper pot. If it doesn't work well, you will suddenly put a huge amount of pepper on the food, causing you to sneeze.

Thankfully, percentage of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How do you might ask? Okay, let's look at the HTML.

Fortunately, many mainstream browsers now support HTML element rotation. Will this be better? I can use it on IE (or even IE5.5. What do you want to ask? Okay. Let's take a look at HTML.

<div class="example-date">  <span class="day">31</span>   <span class="month">July</span>   <span class="year">2009</span></div>

Nice and clean without too extends extras. I conscientiously chose the date order I did to avoid having to use a comma. otherwise, an extra span wocould be required to remove the comma from our final design.

This code is not too cumbersome and clean and beautiful. I carefully selected the date order I used to avoid using commas. Otherwise, an extra span is used to remove the comma from the final design.

The Magical CSS
Magical CSS

For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.

For Webkit and Firefox (from version 3.5), you can use the transform attribute in the proposal to process rotation. Currently, each Browser needs to add a prefix for this attribute.

-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 

In order to perform a transformation, the element has to be set to display: block. In this case, just add the declaration to the span that you want to rotate.

To perform the conversion, the element must be set to display: block. Here, a declaration is added for the span to be rotated.

When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I 'd say) in using filters. although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

When talking about the effects of Internet Explorer, I have to say that using filters can provide exceptionally powerful functions (but many of them have not yet been developed ). One of the filters, called BasicImage, may be a bit misleading-it can rotate any element with layout.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90,180 or 270 degress respectively.

The rotation attribute of the BasicImage filter can take one of the following four values: 0, 1, 2, or 3, corresponding to rotating the element 0, 90, 180, or 270 degrees.

The BasicImage filter has other properties that can be set such as processing ing, masking, greyscale and others. alternatively, you can take advantage of the Matrix filter but the coordinates still don't make any sense to me.

The BasicImage filter also has other attributes that can be set, such as grouping, masking, and greyscale. You can also use the Matrix filter, but these coordinates do not make sense to me.

In action
Actual Effect

What does this look like in action? Take a look at this page in Safari, Firefox or Internet Explorer and you shoshould see something that looks like the following image. probably the biggest downfall is the lack of consistency in text rendering. internet Explorer will drop ClearType on any text that has a filter applied to it. you can also see the spacing between the day and the year is different between Safari and Firefox. the differences in text rendering make it more difficult to create "pixel perfect" layout.

For more information about the actual results, see Safari, Firefox, or Internet Explorer. Perhaps the biggest difference lies in the inconsistency of text presentation. Internet Explorer discards the ClearType feature for any text that has a filter applied. You will also see that for Safari and Firefox, the spacing between dates and years is different. The difference in text rendering makes it difficult to establish a "Pixel Perfect (Pixel Perfect)" layout.

Here's hoping the article has offered up a little inspiration and shown that even IE has a few tricks up its sleeve, allowing us to pull off some layout fun.

I hope this article will give you some inspiration. Although some tricks are required in IE, we still feel the fun of layout.

(End)