Dynamic Advertising with HTML5 - HTML5 Advertising - page 268

-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
height: 100px;
width: 200px;
overflow: hidden;
white-space: nowrap;
padding: 5px;
}
</style>
</html>

Now any copy that fills the div called textArea will get an ellipsis attached to the tail end of the copy should the
words overflow the div container. There is also another useful CSS tip for mobile devices called overflow: scroll .
Using the following CSS on mobile devices (iOS 5+) will give you a native and elegant scrolling feature similar to the
experience on the native operating system:

#textArea {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

Next, I'll discuss the concept of text sizing as data and words grow. Again, when working with dynamic data, you
have no idea what amount of data is coming to you in the response. Unless you discuss this beforehand with the back-
end developers who could employ character limits, you'll need to use some text sizing code that you can leverage via
JavaScript to detect the size of the div container and the number of words filling the container. Using the example
located at http://jsfiddle.net/qW5h2/1 from Nikolay Kuchumov, you can reduce the size of the font to fit within the
allotted space for which it's designed. This is a bit tricky to pull off and can even come back to bite you if the copy is
getting reduced significantly, especially if your clients are Pharmaceutical companies (Pharma) and every word needs
to be clear for legal reasons. The best bet is to communicate with your web service provider, and if the time allows,
perhaps they could add a special node with a font size value. This way, the ad can check that node for its value and
size appropriately without doing any logic.
There is one other trick I wanted to mention, and it's the concept of viewport size. This is increasingly important
for mobile devices. In short, viewport size/scale can dynamically update the size and scale of the fonts on-screen
based on the zoom level of the viewport. This is something to make note of if you're using CSS font sizing in vw . Keep
in mind that this will alter the container-sizing method shown previously, but between each of these tricks, you
should have a good understanding of what technique bests serves you and your campaign. For more information on
viewport-sized type, visit http://css-tricks.com/viewport-sized-typography .

■ there is also a very nice lightweight jQuery plug-in called Fittext ( http://fittextjs.com ) for responsive
font sizing.

Note

HTML5 Data Attribute
Now that you understand how effective it can be to leverage data from within your advertisements, let's take a look
at some new features that HTML5 permits you to use in the new browser market. New in HTML5 is the optional and
arbitrary data attribute that can be used from within the HTML markup. Taking the example covered in the “Macros