0

I found that Javascript method getClientRects always yields an array of 1 element only, even when it is called for multiple lines p, for example. I expect as many rects as many lines the p was displayed over because it is longer than a single line. Is this method supported on Android WebView or there is a bug?

P5music
  • 3,197
  • 2
  • 32
  • 81
  • for solution see http://stackoverflow.com/questions/9359279/how-to-get-the-heights-of-line-boxes-a-block-element-with-inline-elements-insid – P5music Feb 29 '12 at 22:34

1 Answers1

1

The <p> element is a block element, so returns one ClientRect for the block. Anonymous inline boxes are not listed. So, one ClientRect in the return is correct.

However, an inline element, like a <span> or <em> for example, will report one ClientRect for each line the element is broken into. That's because the boxes are not anonymous.

(Read from between the lines in the specification of getClientRects() in the W3C CSSOM View Module spec)

Mihai Iorga
  • 39,330
  • 16
  • 106
  • 107
ikmac
  • 181
  • 4
  • According to that document it seems that anonymous boxes are replaced with their child-boxes until no anonymous boxes are left – P5music Aug 23 '12 at 09:36
  • @P5music - The anonymous boxes inside a _p_ have no children. The boxes created by an inline element (_em_ or _span_ etc) are not anonymous, but they're not children of the other inline boxes either. – ikmac Aug 24 '12 at 10:33
  • From the document I understand that the goal is to yield the boxes an element is made of with their rects. If they are anonymous they are replaced by children; eventually the deepest children (if any) have their rect calculated, regardless being anonymous/not anonymous .If I recall correctly my early tests (see also my link to another SO question above), Internet Explorer and WebBrowser .NET control calculates the rects as expected. – P5music Aug 25 '12 at 08:34
  • Look at http://www.quirksmode.org/dom/w3c_cssom.html and at http://www.quirksmode.org/dom/tests/rectangles.html for examples -- a _p_ with no child elements (only text) has one rect, unless the block box is broken in the CSS box model layout for some reason. The anonymous child inline box that contains the text does not have any children, and is ignored, whether the text fits in one line or not. All browsers agree on this -- one rect. Throw some inline elements into the paragraph, and the spec says that _these_ child boxes are listed in the ClientRectList. More, next comment... – ikmac Aug 26 '12 at 14:58
  • hmmm. Looking at the quirksmode test page... Chromium browser does something that makes much more sense. Clicking on text that is a direct child of the _p_ (not in the _em_) gets one rect -- the block box of the _p_. Clicking on any of the elements gives one box -- the inline box of the text (in as many rects as the element is broken into lines). Clicking on the very large gives multiple rects. There are 3 boxes, and the is broken into 4 pseudo-element boxes by the child elements, as per CSS box model. This gives 7 inline boxes... – ikmac Aug 26 '12 at 15:13
  • which are then chopped into lines as the browser lays out the text. On my screen, this text is broken into 5 lines, so these 7 boxes get 4 cuts to make 5 lines, so you get 11 boxes. IE does something different every major engine change, and the other browsers do other things. I can see why the poor author at quirksmode declared the specification of getClientRects incomprehensible and refused to test it on his first pass. – ikmac Aug 26 '12 at 15:21