File: vertical_align.html

package info (click to toggle)
tk-html3 3.0~fossil20110109-6
  • links: PTS, VCS
  • area: main
  • in suites: stretch
  • size: 6,644 kB
  • ctags: 5,882
  • sloc: ansic: 48,994; tcl: 26,030; sh: 1,190; yacc: 161; makefile: 24
file content (81 lines) | stat: -rw-r--r-- 3,160 bytes parent folder | download | duplicates (5)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<html>
  <head>

    <!-- The contents of this element should be duplicated in the "pre" 
         element in the document body below.  -->
    <style>
      .sub   {vertical-align: sub ; color: red}
      .super {vertical-align: super ; color: red}

      .percent50  {vertical-align: 50% ; color: green}
      .bigfont    {font-size: 1cm}

      .drop1cm    {vertical-align: -1cm ; color: blue}
      .raise1cm   {vertical-align: 1cm ; color: blue}
    </style>

  </head>
  <body>
    <pre>
      .sub   {vertical-align: sub ; color: red}
      .super {vertical-align: super ; color: red}

      .percent50  {vertical-align: 50% ; color: green}
      .bigfont    {font-size: 1cm}

      .drop1cm    {vertical-align: -1cm ; color: blue}
      .raise1cm   {vertical-align: 1cm ; color: blue}
    </pre>

    <hr>
    <p>
      Smoke test: This paragraph contains <i class="super">superscript</i> 
      and <i class="sub">subscript</i> text. The subscript text in the 
      previous sentence should cause the following line to shift down
      a little to make room. Fill this paragraph up with text so that 
      this is more obvious. Fill this paragraph up with text so that 
      this is more obvious. Fill this paragraph up with text so that 
      this is more obvious. 
    </p>

    <hr>
    <p>
      Test for percentage values of vertical-align. Both the green 
      elements <i class="percent50">in this</i> paragraph have a 
      vertical-align of 50%. But one element occurs in a 
      <i class="bigfont">taller</i> line box than the other. Is the 50% 
      <i class="percent50">based on</i> the actual height of the line-box?
    </p>
    <p>
      A similar test to the previous. What if the text with the vertical
      align is itself rendered in a <span class="bigfont">
      <i class="percent50">really big</i></span> font? Again, put some filler
      text in this paragraph to make the effects easier to observe. Again, put
      some filler text in this paragraph to make the effects easier to observe.
      Again, put some filler text in this paragraph to make the effects easier
      to observe.  Again, put some filler text in this paragraph to make the
      effects easier to observe.
    </p>
    <p>
      According to Mozilla and Konqueror, percentage values for 
      vertical align are calculated relative to the line-height of the 
      inline element itself. Opera calculates relative to the line-height of 
      the parent block. It seems to me M and K have it right.
    </p>

    <hr>
    <p>
      When text is dropped or <i class="raise1cm">raised</i>, the size of 
      the line box should be increased so that the lines do not bleed 
      into each other. I first noticed this problem with 
      <i class="drop1cm">dropped</i> text. xx xx  xx xx  xx xx  xx xx  xx 
      xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx 
      xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx 
      xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx 
      xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx xx  xx 
    </p>

  </body>
</html>