RichInStyle.com tests: inline text

Case 1 - inline right float

tNormal tex

That (with a floated t) should look the same as this (apart, perhaps, for a little less/more spacing before the t):

Normal text

Case 2 - more complicated inline right float

Code

<P style="font-size: 16px; line-height: 24px">
(a) What ... <span style="float: right; width: 6em; text-align: right; background: blue"><span style="background: red">(12)</span></span><br>
(b) What ... <span style="float: right; width: 6em; text-align: right; background: blue"><span style="background: red">(13)</span></span><br>
<span style="float: right; width: .1em; line-height: 16px; text-align: right; background: blue"> <span style="background: red; border-width: medium 0; border-style: solid">25</span> </span>

Rendering

(a) What were the principal causes of the US stock market crash of 1929? (12)
(b) What, if any, were the lasting effects of the crash on American society? (13)
25

Correct rendering

In the example above, the right of each element should be in line. The whole thing should look like a conventional examination question (apart from the backgrounds). Here's a mockup (it probably won't give a perfect rendering, but all problems exhibited here will be due to non-float related bugs):

Case 3 - more complicated inline right float

Code

This is the same but with the substitution of text-align: left on the float:

<P style="font-size: 16px; line-height: 24px">
(a) What ... <span style="float: right; width: 6em; text-align: left; background: blue"><span style="background: red">(12)</span></span><br>
(b) What ... <span style="float: right; width: 6em; text-align: left; background: blue"><span style="background: red">(13)</span></span><br>
<span style="float: right; width: .1em; line-height: 16px; text-align: left; background: blue"> <span style="background: red; border-width: medium 0; border-style: solid">25</span> </span>

Rendering

(a) What were the principal causes of the US stock market crash of 1929? (12)
(b) What, if any, were the lasting effects of the crash on American society? (13)
25

Correct rendering

And here's a mockup of its rendering (note that this rendering is inaccurate - the right of the blue should be aligned with the right of this element, with the left of the 25 to the right of that, but this can't be simulated so you'll just have to imagine it:

Code

And here is an example that browsers are more likely to render in an acceptable manner:

<P style="font-size: 16px; line-height: 24px">
(a) What ... <span style="float: right; text-align: right; width: 4em">(12)</span><br>
(b) What ... <span style="float: right; text-align: right; width: 4em">(13)</span><br>
<span style="float: right; width: 2em; text-align: right"><span style="border-width: medium 0; border-style: solid">25</span></span>

Rendering

(a) What were the principal causes of the US stock market crash of 1929? (12)
(b) What, if any, were the lasting effects of the crash on American society? (13)
25

Code

And here, finally, is an example that browsers are even more likely to render in an acceptable manner (the right float precedes all content on its line; unfortunately this code degrades rather poorly, with the marks illogicaly placed, to the left of the question):

<P style="font-size: 16px; line-height: 24px">
<span style="float: right; text-align: right; width: 4em">(12)</span>(a) What ...<br>
<span style="float: right; text-align: right; width: 4em">(13)</span>(b) What ... <br>
<span style="float: right; width: 2em; text-align: right"><span style="border-width: medium 0; border-style: solid">25</span></span>

Rendering

(12) (a) What were the principal causes of the US stock market crash of 1929?
(13)(b) What, if any, were the lasting effects of the crash on American society?
25

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.