Re: [css-inline] i18n-ISSUE-408: Boxed characters and initial letter properties

> On 23 Jan 2015, at 13:08, Richard Ishida <ishida@w3.org> wrote:
> 
> 2.4. Alignment of Initial Letters: the initial-letter-align property
> http://dev.w3.org/csswg/css-inline/#aligning-initial-letter
> 
> Looking at the examples at https://www.flickr.com/photos/ishida/sets/72157650248400402/ I noted that another apparently popular approach to initial letter highlighting involves centring the text in a decorated box. Here are some examples:
> 
> Hebrew
> https://www.flickr.com/photos/ishida/15650929903/in/set-72157650248400402
> https://www.flickr.com/photos/ishida/16084956857/in/set-72157650248400402/
> 
> Chinese
> https://www.flickr.com/photos/ishida/15650930393/in/set-72157650248400402
> 
> Korean
> https://www.flickr.com/photos/ishida/16246010056/in/set-72157650248400402
> https://www.flickr.com/photos/ishida/16086075057/in/set-72157650248400402/
> 
> Devanagari
> https://www.flickr.com/photos/ishida/15652027313/in/set-72157650248400402
> https://www.flickr.com/photos/ishida/16084553210/in/set-72157650248400402/
> https://www.flickr.com/photos/ishida/16084392688/in/set-72157650248400402/
> https://www.flickr.com/photos/ishida/16084553630/in/set-72157650248400402/
> and others
> 
> 
> It seems logical to assume that one might use the ::first-letter plus initial-letter property to indicate the vertical height of such a box, and the general displacement relative to the first line.  The current values of initial-letter-align, however, don't seem relevant - the enlarged character(s) in the above example appear to be centred vertically and horizontally within the box, and it is the box that is aligned with the rest of the text. Do we need a 5th value for the initial-letter-align property that centres the sequence of characters in a box who's size is indicated by the initial-letter property (ie. rather than aligning by baselines), and that indicates the alignment of the top and bottom of the box relative to the follow-on text?
> 
> (This comment has been reviewed by the i18n WG.)

To be able to achieve the full effect of your examples, we would also need to be able to apply borders and padding inwards. Currently, http://dev.w3.org/csswg/css-inline/#initial-letter-box only defines a classical model for padding, border and margin (growing outwards from the content-box, which is the one that gets sized).

The devanagari examples should probably be possible to style with something like this:
::first-letter {
  initial-letter: 3;
  box-sizing: border-box;
  border:solid black;
  padding: 5px; /* Maybe */
}

Which means we need to define the model for when initial-letter and box-sizing are applied together. How about this:

When box-sizing is not content-box, the outer size of the box designated by box-sizing is sized according to the initial-letter property, and aligned with the surrounding text based on initial-letter-align. The content-box's size is calculated from it after subtracting paddings and borders as appropriate, and the glyph is sized to just fit this content-box vertically - or horizontally in a vertical writing mode, which incidentally also centers it.

If you look at the boxes in the Hebrew and Korean and Devanagari examples you posted, it seems that something close to that, rather than initial-letter-align center, is what is happening: the background color is properly aligned on the relevant aspect of the surrounding script, implying initial-letter-align is still doing its job to place that box, but then the letter inside it is padded inwards, and in the case of Devanagari a border is also applied.

The Chinese example looks tricky: the top of the 大 character is aligned with the top of the characters on the first line, and the box to which the is applied background extends above; on the lower side though, the box to which the background is applied lines up with the bottom of the characters on the last line, and the bottom of the 大 character aligns with nothing in particular. I am not quite sure what to make of that, both in terms of alignment or sizing.

 - Florian

Received on Friday, 23 January 2015 14:21:29 UTC