[CSS-inline][css-initial-letters] Numbers used much like Initial Letters

The Wall Street Journal Magazine, in an article [1] about tennis star Stanislas Wawrinka, displayed an interesting layout that has similarities to that of Initial Letters.

This article begins with a normal heading and opening paragraph and then changes into what might (in CSS) be a sequence of "flexbox"es each having two flex items: a short paragraph of text and an (oversize) number. The text of the paragraph explains the significance of the number. For example, number: 144; paragraph: MPH the top speed of Wawrika's blistering serve. In the sequence of flexboxes, the number and the paragraph trade places in each "row", first the number precedes the paragraph and then it follows it, then it precedes, etc. As a flexbox, both the height of the number and the height of the paragraph determine the height of each particular flexbox. (They vary in height.) But, the height of the number seems chosen to nearly match the height of the paragraph with which it is associated. In addition, the alignment of the number is to the alphabetic baseline of the last line of the paragraph.

The net effect of this layout is very similar (when the number precedes the paragraph) to that of an Initial Letter sequence [2]. The alignment is basically the same, but using Flexbox means that the fontsize of the number must be pre-specified rather than determined by the number of lines in the associated paragraph. Still, it is useful, from an alignment perspective, to consider the similarities between Flexbox alignment and Initial Letter alignment [3].

Steve Zilles

[1] http://lists.w3.org/Archives/Public/www-archive/2014Jul/0024.html
[2] https://dvcs.w3.org/hg/csswg/raw-file/9b621c1aa93c/css-inline/Overview.html#DropInitial
[3] http://lists.w3.org/Archives/Public/www-style/2014Jul/0077.html