As iPhone web apps have limited screen width to play with, and you also generally need to avoid small font sizes, there may be times when you need to use scrolling text. This is the case with Oz Weather – where the weather forecast description is usually quite brief eg. “Fine”, “Scattered showers”, but can sometimes be much longer eg. “Showers, windy, mountain snow”, which overflows the available space.
One solution here is to add an onclick event to this text field, and show the full text using an “alert” call. However, unless the text had an (ugly) underline or similar, most users would probably not realise it could be clicked on, and in any case, it is always best to avoid forcing the user to take extra action simply to see what should be readily visible already.
You could also deal with this using javascript code to scroll the text one letter at a time. However, in practice this results in very jerky motion – not at all compatible with the iPhone’s other slick animation capabilities.
Fortunately the built-in Safari browser allows some CSS3 type markup, including marquee capability – which does have nice, smooth animation. Apple’s reference for Safari’s CSS can be found here. Look in the section “Visual Effects”.
The relevant CSS properties are:-
- overflow-x
- -webkit-marquee-direction
- -webkit-marquee-style
- -webkit-marquee-speed
- -webkit-marquee-increment
- -webkit-marquee-repetition
The following example can be placed into a class style which applies only to fields in which the text actually overflows.
.marquee
{
white-space: nowrap; overflow: hidden;
overflow-x:-webkit-marquee;
-webkit-marquee-direction: backwards;
-webkit-marquee-style: alternate;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 4;
}
The effect here is to cause the text to scroll from left to right until the end of the text falls just inside the visible area, and then scrolls back the other way. It does the entire loop twice (4 repetitions in alternate directions).
Obviously, if you want to see this in action, you will need to try it in a browser that supports these properties eg. Safari 3.0 or later on iPhone, Mac or Windows. (If you are viewing the Oz Weather site to see this in action, you will need to find a city which happens to have lengthy forecast description text for at least one of its forecast days.) However for now IE or Firefox don’t support it, and you will simple see motionless, truncated text. In that case you can still click on the text field to see the full text.
Ajnaware's Weblog 
One thought on “Scrolling text with -webkit-marquee”