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

> On 23 Jan 2015, at 18:39, Richard Ishida <ishida@w3.org> wrote:
> 
> hi Florian,
> 
> On 23/01/2015 14:21, Florian Rivoal wrote:
> ...
> 
>> 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 */
>> }
> 
> 
> My initial reaction was to assume that what's needed is something like text-align and vertical-align, applied to the box, rather than padding.


I sort of thought so too at first, but size and alignment are not independent parameters, and I think that changes the game. For instance, 'initial-letter-align: alphabetic' aligns the cap height of the initial letter with the cap height of the first line AND the baseline of the initial letter with the baseline of the last baseline, determining both alignment and size.

Switching initial-letter-align to center becomes tricky: align the center of what with the center of what? The correct answer will be different for devanagari, alphabetic or CJK.

Also, in some cases, the box to which you may apply a background and the character are the same size (examples from the spec), in some cases they are not (examples form your mail). When they are not the same, what models

My model accounts for the following situation:

1. If the box and the character are the same size, language/script specific alignment & sizing is are linked and apply to both, and centering is not a useful concept. initial-letter-align as currently specified solves this case.

2. If the box and the character are not the same size, either the box follows language specific sizing & alignment and the character is shrunk inside it, or the character follows language specific sizing & alignment and the box is larger than it.

2.1. if the character is aligned and sized, initial-letter-align as currently specified, combined with paddings and borders, solves this case.

2.2. if the box is what's aligned and sized (as is the case in your examples), the spec as it currently isn't enough. Note that in this case, since the character inside the box is now smaller, it cannot have its (language specific) top and bottom aligned with the (language specific) top and bottom of lines, making initial-letter-align inappropriate. However, the values of initial-letter-align are now the correct ones to describe the alignment of the top and bottom of the box to language specific anchor points.

In this situation, my proposal is to use box-sizing as the trigger indicating that if they are different, the box rather than the character is what should be sized and aligned according to initial-letter-align. This gives a model for how to size and align the character without introducing any new property: fit the content-box. If instead, your model works by giving a centering point for the character, you also need to give it a size, but I am not sure how you'd go about specifying this.




> I'm hesitant to read too much into the Chinese example without seeing more examples like it, preferably from higher quality printed materials. (The source of this is a newspaper.)
> 
> I wonder whether Bobby Tung has some ideas on this.

Agreed. Until we find more examples of this pattern, I am not too worried. Besides, you can actually express it with the model I described by using box-sizing:padding-box (only supported in FF at the moment).

::first-letter {
  color: white;
  background: black;

  initial-letter: 3;
  initial-letter-align: ideographic;

  box-sizing: padding-box;
  padding-bottom: 15px; /* pushes the bottom of the letter inwards */
  border-top: 5px solid black; /* pushes the top of the box outwards */

  padding-left: 5px;
  padding-right: 5px;
}

 - Florian

Received on Saturday, 24 January 2015 12:51:36 UTC