Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Vertical Text with CSS

Saturday, February 27th, 2010

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

To display vertical text:

^?View Code CSS

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
}

^?View Code HTML

<div id="right-col">FeedBack</div>

-webkit-transform is supported by Webkit-based browsers such as Safari and Google Chrome.

-moz-transform is supported by Mozilla (Gecko)-based browsers such as Firefox.

writing-mode is supported by Internet Explorer (8, 7, not sure about 6). Can also be written as:

^?View Code CSS

-ms-writing-mode: tb-rl;

writing-mode is a W3C draft specification, -ms-writing-mode is an Internet Explorer specific CSS attribute.

The Writing Mode CSS attribute was initially designed for right-to-left languages, so the vertical text rotation is 90 degrees. In order for the text to appear with a -90 degree like the Mozilla and Webkit transforms:

^?View Code CSS

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
        filter: flipv fliph;
}

Keep in mind that the entire container will be rotated, not just the text. But when you attempt to use CSS to create vertical text on an element within a container, the placement of the text in Firefox, Safari, and Google Chrome is not where you think it would be.

^?View Code CSS

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
}
 
#right-col p {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
        filter: flipv fliph;
}

The height of the container (#right-col) will not increase to accommodate the new position of the P element. And the P element is displayed below the container, vertically centered. So,

^?View Code HTML

<div id="right-col"><p>FeedBack</p></div>

Will be displayed as:

Vertical Text

I made several attempts to correct the placement of the element, but was unable. It is easier to just apply the CSS vertical text attributes on the container.

Categories: CSS
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

7 Responses to “Vertical Text with CSS”

hui Says:
March 22nd, 2010 at 5:30 am

nice
Alan Says:
June 9th, 2010 at 1:16 pm

Very nice post. I’m also running into the placement problem. When rotating text with CSS, all the positioning, width, and height attributes remain the same even though the drawn text is rotated. Therefore, the attributes do not match how the text actually appears on the screen. This makes positioning rotated text very difficult if it has to contend with other elements on the page and not overlap them.
Alan Says:
June 9th, 2010 at 3:11 pm

Setting the origin of the text transformation will allow easier positioning:

-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
Franklin Says:
September 14th, 2010 at 10:32 pm

I finally find the CSS for Firefox, thank you so much. For Opera, you can use “-o-transform: rotate(-90deg);”, I just tried on my Opera 10.61.

Wishes!
.-= Franklin Fu´s last blog ..推荐两个在线格式化JavaScript代码的网站 =-.
Scott Gale Says:
December 5th, 2010 at 10:42 pm

Here is a breakdown of the technique that I used, which is very similar: http://scottgale.com/blog/css-vertical-text/2010/03/01/
Richard Tomkins Says:
March 25th, 2011 at 2:24 pm

Hey i just visited your site for the first time and i really liked it, i bookmarked it and will be back
Jim Says:
May 2nd, 2011 at 8:07 am

Hi there, can someone help me? I am trying to rotate an element inside a container but it does not rotate in chrome.

div.navigation a {
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: flipv fliph;
white-space: nowrap;
}

Vertical Text with CSS

7 Responses to “Vertical Text with CSS”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll