Week 4 Exam

Due Tuesday, 3 September 2002

1. What is the difference between the height of the em-box and the height of the content-area for a non-replaced element?

   The em-box is the distance between baselines when the font is set with no extra leading. Fonts could be defined such that the characters are smaller or larger than its em box and this is all determined by the font's designer. So, font-size is providing a size for the em box for a given font, not necessarily the actual displayed character size. 1 em is the height of the character box for a given font.

   Content-area is determined by the font-size. An inline element with a font-size of 12px has a content-area height of 12px.

2. How is half-leading determined in CSS, and what does its application determine? Be as detailed as possible.

   Leading is the difference between line-height and font-size.

   Half-leading is taking that difference and dividing it by two. One-half is applied to the top of the inline box and the other half is applied to the bottom of the inline box. Thus, line-height can increase or decrease the height of the inline box (the inline box is exactly equal to the content area until you designate a line height.)

3. Consider the following styles and markup:

     p#q45 {font-size: 20px; line-height: 30px;}
     sup {font-size: 16px; line-height: 75%; vertical-align: 50%;}
   
     <p id="q45">That's quite a car<sup>[1]</sup> you have there.</p>
   

   That's quite a car^[1] you have there.

   Assuming that one-quarter of each character box is below the baseline, answer the following:
   
   
   1. What is the height of the sup element's content-area?

      Determined by font-size, so 16px.

   2. What is the height of the sup element's inline box?

   28px.
   Font-size (16px) x line-height (75%) = 12px of leading. (12 + 16 = 28)

   3. How far will the sup element be raised?

      6px.
      When the value of the property vertical align is a percentage, it refers to the line-height of the element. So, line-height x vertical-alignment would be 12px x 50% = 6px - the element is raised 6px.

   4. What is the height of the line box for this line?

      36px.
      The line box bounds the top of the highest inline box and the bottom of the lowest inline box. The paragraph itself has an inline box height of 30px (font-size 20px plus leading of 10px). The sup element has an inline box height of 28px and it is raised 6px off the baseline. (30px + 6px)

4. Consider the following styles and markup:

     p#se4 {font-size: 10px; line-height: 120%;}
     sub {font-size: 0.8em; vertical-align: -3px;}
     img {margin-top: -2px; border: 2px solid black;
          width: 10px; height: 12px;}
   
     <p id="se4">
     This is the symbol of the Murun<sub>84</sub>: <img src="murun84sym.gif">.
     </p>
   

   This is the symbol of the Murun₈₄: .

   Assuming that one-quarter of each character box is below the baseline, answer the following:
   
   
   1. What is the height of the sub element's content-area?

      8px.
      .8em is 80% x 10px (parent element) is 8px.

   2. What is the height of the sub element's inline box?

      18px.
      8px font size x 120% parents line-height is 9.6 leading, rounded to 10px (8 + 10=18).

   3. How far will the sub element be lowered?

      -3px

   4. What is the height of the line box for this line?

      25px.
      22px for the paragraph plus 3px for the sub below baseline = 25px.

      The inline box height for the paragraph is 22px (10px font-size and 12px leading (10px x 120%)); the inline box height for the sub element is 18px with 3px below baseline; the inline box height for the img element is 14px (12px for the image height + 2px borders (4px total) - 2px top margin).