Re: [csswg-drafts] [css-shapes] Allow shape-outside to apply to initial letter

Er, based on the discussions above, I have another idea to discuss.

Perhaps we could define the relationship between these two properties at first, `shape-outside` and `initial-letter-wrap`. The following is my opinion.

- `shape-outside` defines the external shape of the element as a whole
- `initial-letter-wrap` defines how to place the element in the specific context. And in this case the context is initial letter, then this property specially indicates how to handle its glyph outline.

About priority, of course, `initial-letter-wrap` priors to `shape-outside`, because it represents the specific context.

Then we recast the values of `shape-outside` and `initial-letter-wrap`.

#### Values of `shape-outside`
```css
shape-outside: none;

shape-outside: margin-box; /* by default */
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* these above xxx-box could represent the rectangular shape of the initial letter box */

/* new values */
shape-outside: rendered-content;  /* or whatever it ends up being named */
shape-outside: grid;  /* be same as https://drafts.csswg.org/css-inline/#valdef-initial-letter-wrap-grid  */

/* custom arbitrary shapes */
shape-outside: circle();
shape-outside: ellipse();
...
```

#### Values of `initial-letter-wrap`
```css
initial-letter-wrap: none;   /* by default, i.e. using rectangular box */
initial-letter-wrap: first;  /* the first line uses glyph outline */
initial-letter-wrap: non-first; /* the non-first lines use glyph outline */
```

#### Usage
e.g.
```css
/* 1. no setting the both, all lines wrap margin-box*/

/* 2. all lines wrap glyph outline */
shape-outside: rendered-content;  /* or some other name */

/* 3. first line wraps glyph and the others wrap margin-box */
initial-letter-wrap: first;

/* 4. first line wraps margin-box, and the others wrap glyph */
initial-letter-wrap: no-first;

/* 5. all lines wrap custom shape */
shape-outside: circle();

/* 6. first line wraps glyph and the others wrap custom shape */
shape-outside: circle();
initial-letter-wrap: first;
```

-- 
GitHub Notification of comment by anjia
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/885#issuecomment-397826202 using your GitHub account

Received on Saturday, 16 June 2018 17:07:40 UTC