W3C home > Mailing lists > Public > www-style@w3.org > December 2011

Re: Text-selecting/highlighting content area or line box? (was [CSS 2.1] [Section 9.5.1] Vertical positioning of floating boxes)

From: Alan Gresley <alan@css-class.com>
Date: Thu, 15 Dec 2011 18:57:28 +1100
Message-ID: <4EE9A868.9040208@css-class.com>
To: www-style@gtalbot.org
CC: W3C www-style mailing list <www-style@w3.org>
On 8/12/2011 9:59 AM, "Gérard Talbot" wrote:
>
> Le Dim 12 septembre 2010 23:01, Alan Gresley a écrit :
>> Gérard Talbot wrote:
>
> GT>>  3- When text-selecting/highlighting a chunk of text (by dragging the
>>> mouse), we are in fact hightlighting what exactly? I think we are
>>> highlighting the content area; I think we are not highlighting the line
>>> box. Am I wrong?
>>
>>
> AG>  You are highlighting line boxes. Sort of like when you hover line
>> boxes and the mouse pointer changes from a cursor to a text (indicates
>> text that may be selected. Often rendered as an I-beam.).
>
>
> Alan,
>
> In this testpage
>
> http://test.csswg.org/suites/css2.1/20110323/html4/c527-font-001.htm
>
> when I text-select/highlight a chunk of text (by dragging the mouse), I
> think we are highlighting (in reverse video) the content area if we are
> using Firefox 8.0 or Opera 11.60 or Konqueror 4.7.3 (I will check other
> browsers later).  The vertical white gap between highlighted content area
> is the leading (or top-half-leading of current line box plus
> bottom-half-leading of previous line box) which is 9px in that page.

That is what I observe in Firefox 8.0 or Opera 11.60 and IE9 (Windows).

> If we are using Chrome 15.0.874.121, then we are highlighting the content
> area plus the top-half-leading of the line box plus the
> bottom-half-leading of the previous line box. I reached such conclusion
> after creating this testcase:
>
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/line-height-bleed-003-GT.html
>
> which is supposed to improve the
>
> [RC6]
> http://test.csswg.org/suites/css2.1/20110323/html4/line-height-bleed-003.htm
>
> [nightly-unstable]
> http://test.csswg.org/suites/css2.1/nightly-unstable/html4/line-height-bleed-003.htm
>
> regards, Gérard


Hello Gérard,

What Safari 5.1.2 and Chrome 16 (on Windows 7) does when highlighting 
seems to be very wrong.

I understand the like box as something that is the height of the glyphs 
or ideographs that are contained within such a line box and depending on 
the line-height (from baseline to baseline of successive line boxes), 
the line boxes can be either be spaced well apart or overlapping. From 
Wikipedia [1] is this:

   | In typography, leading (play /ˈlɛdɪŋ/) refers to
   | the distance between the baselines of successive
   | lines of type.

When you drag the cursor to highlight a line in WebKit, what is being 
highlighted is a 'pseudo line-height box' (a random name) that begins at 
the bottom of box that contains the glyphs or ideographs. In your text 
case 'line-height-bleed-003-GT.html' this seems to be affected by lines 
of different heights.

Try highlighting the Ahem text in this test.

<!DOCTYPE html>

<style type="text/css">
     div {font: 100px/0.5 Ahem;}
</style>

  <div><br>X pÉ</div>

Only the bottom half of the box is highlighted and this equals the 
height of the line-height. When you have a mixed of different glyph or 
ideographs base (not Latin), this becomes more haphazard.

Please try highlighting the various lines of text here (compare WebKit 
and then say Firefox).

http://css-class.com/test/css/text/line-height-descenders-mixed-script.htm

What I also note in WebKit (Windows). If you have several lines of text, 
when you reach a line box on a new line, the full length of the 
block-level element is also highlighted that is proceeding the new line.

CSS2.1 is (or was) somewhat unclear about line boxes and how line-height 
was used. Please see this list messages [2] where I have mentioned this 
and also this list message [3] that give the reasoning and history 
behind current implementation behaviour.

Just a note. I can not see this image

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/support/ruler-v-100px-200px-300px.png

in Firefox (nor in the testcase). I can save the image but it is just blank.

Regards, Alan


1. http://en.wikipedia.org/wiki/Leading
2. http://lists.w3.org/Archives/Public/www-style/2011Jan/0116.html
3. http://lists.w3.org/Archives/Public/www-style/2010Dec/0448.html


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 15 December 2011 08:04:47 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:47 GMT