もずはっく日記(2006年3月)

Bug 4501 letter-spacingのリファクタリング
初回投稿日時: 2006年03月14日02時36分01秒
カテゴリ: CSS Mozilla Core
SNS: Tweet (list)

概ね仕様がfixしてきた。基本的には文字間にのみスペースを追加する、画像等のインラインのオブジェクトもletter-spacingによって余白を持つ等の仕様になる予定。ちなみに、今のところWinIEの実装ともOperaの実装ともずれているが、インライン要素への指定で最もそれっぽいのはWinIEかもしれない。とりあえず仕様のディスカッションの一部を以下に引用しておく。

------- Comment #11 From fantasai  2006-03-11 22:14 PST  [reply] -------
Applying the letter-spacing to spaces within the letter-spaced element is well
established implementation-wise, so that can't change. But the behavior at
element boundaries is inconsistent, so we can spec that to be consistent and
reasonable.

Here's what I've drafted so far:

  | At element boundaries, the letter spacing is given by and rendered within
  | the innermost element that contains the boundary.
  | 
  | For example, given the markup
  |
  |   <P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P>
  |
  | and the style sheet
  |
  |   LS { letter-spacing: 1em; }
  |   Z { letter-spacing: 0.3em; }
  |   Y { letter-spacing: 0.4em; }
  |
  | The spacing would be
  |
  |   a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g

------- Comment #18 From fantasai  2006-03-12 11:03 PST  [reply] -------
> Doesn't the letter-spacing of end of line appear, right?

No letter-spacing at the beginning or end of a line.

> Should we render as:
> a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g
>           ~~~~~~~~~

Yes.

I would set up frames like this:

+-+------+---------+-----+---------+-+
|a|b[1em]|c[0.3em]d|[1em]|e[0.4em]f|g|
+-+------+---------+-----+---------+-+

Imagine putting backgrounds or borders on the elements.
The hierarchy needs to come out like this:

         +---------+     +---------+
  +------|---------|-----|---------+
+-|------|---------|-----|---------|-+
|a|b[1em]|c[0.3em]d|[1em]|e[0.4em]f|g|


> <p style="letter-spacing: 1em;">ab<img/>cd</p>

That should render as a[1em]b[1em]<img/>[1em]c[1em]d