Monday, January 23, 2012

A scalable HTML layout with images and fonts, using percentages, max-width and the em unit

After my post A CSS3 only solution to show and enlarge a thumbnail layer I asked my brother what he thought of it. He gave me a CSS2 solution to achieve more or less the same thing. I say 'more or less' because, for example, smooth transitions can only be done in CSS3. But I learned some new things that I had not been much conscious of before:

  • Images can be made scalable by giving them a width that is a percentage of their container.
  • Using max-width we can make sure that an image is not scaled above the specified size.
  • The em unit cannot only be applied to font sizes but also to other attributes like padding to make it relative to font size.

The following HTML, that outputs a cookbook cover, does exactly the same as my CSS3 solution, without the transition effect (if you want you can see the HTML in action):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
        body {
            font-family: Lucida Sans Unicode;
            font-size: 16px;
        }

        .book-cover {
            position: relative;
            width: 240px;
            background-color: #990000;
        }
        
        .image-wrapper {
            position: relative;
        }
        
        .cover-image {
            display: block;
            width: 100%;
            max-width: 100%; 
        }
        
        .plate {
            position: absolute;
            width: 56.25%;
            max-width: 56.25%;
            right: 10.833334%;
            bottom: 0;
        }
        
        .title-wrapper {
            width: 100%;
            display: inline-block;
            margin-bottom: 8.6666%;
            background-color: #c35925;
        }
        
        .book-cover h2 {
            padding: .938em;
            padding-bottom: 0;
            color: #fff;
            font-size: .938em;
        }
        
        .book-cover p {
            padding: 1.407em;
            padding-top: 0;
            color: #3a3a3b;
            font-size: .625em;
        }
        
        .book-cover:hover {
            width: 480px;
        }
        
        .book-cover:hover h2 {
            font-size: 1.875em;
        }
        
        .book-cover:hover p {
            font-size: 1.25em;
        }    
    </style>
</head>
<body>
    <div class="book-cover">
        <div class="image-wrapper">
            <img src="Chilies.jpg" class="cover-image" />
            <img src="Plate.png" class="plate" />
        </div>
        <div class="title-wrapper">
            <h2>Cooking with chilies</h2>
            <p>By: A spice lover</p>
        </div>
    </div>
</body>
</html>
There are two images: the cover photo and the white fork, plate and knife on top of it. They have a percentage width that allows them to be scaled. They also have a max-width attribute saying: "You can be scaled but never above the specified size." Try hovering over the cover in the working example of this post. The images will scale up smoothly.

The .book-cover h2 and .book-cover p styles have a padding that is specified in em. By specifying the padding width in ems, the width of the padding is relative to the font size of the elements. If the font size of the elements increases, the padding around the elements should also increase.

Note that in order to enlarge the book cover we have to enlarge the font of the h2 and p elements explicitly (and there could be more elements in a more complex layout). For this reason I think my CSS3 solution is easier to implement. However, until the full support of CSS3 by all major browsers, this post may provide a good alternative.

No comments:

Post a Comment