Re: [cssom-view] scrollWidth vs clientWidth

Tab,

As the one who started this thread with my confusion, let me say that 
that is a very helpful diagram.  Thanks!  (And it doubles as a CSS 
brain-teaser--for the longest time I could not figure out how you got 
the scrollbar triangles.)

A few comments:

I think the existing  stuff in the spec uses the term "edge" rather than 
area.  Area makes more sense to me, but edge might be more consistent.

I'd change "padding width" to "padding area width" or "padding edge width".

I think the dotted and dashed lines around the content and padding areas 
look like borders, which confuses me since they are inside the border.

I think you should set a background-color on the outermost div (and then 
  set it back to white or transparent on the next one in) so that the 
border area looks like a border.

Since the example demonstrates horizontally-overflowing content, it 
should probably have a horizontal scrollbar as well as the vertical one.

 David

Tab Atkins Jr. wrote:
> On Mon, Aug 16, 2010 at 10:56 PM, Anne van Kesteren <annevk@opera.com> wrote:
>> On Tue, 17 Aug 2010 01:03:33 +0200, David Flanagan <david@davidflanagan.com>
>> wrote:
>>> Perhaps you could add a non-normative green note to the spec to clarify
>>> the distinction between these two properties.
>> I think it would be better actually if one day someone contributes a graphic
>> to visualize the whole thing. If that day never comes I might take a stab at
>> it myself.
> 
> Something like this?
> 
> <!DOCTYPE html>
> <div id=border style="position: relative; width: 500px; height: 400px;
> border: 3px solid black; font-weight: bold; font-family: sans-serif;">
>  <div id=padding style="width: 400px; height: 300px; border: 3px
> dashed gray;margin: 47px;">
>   <div id=content style="position: relative; width:300px;
> height:200px; border: 3px dotted silver; margin: 47px;">
>    <pre style="position: relative; z-index: 50;">foo foo foo foo foo
> foo foo foo foo foo foo foo</pre>
>   </div>
>  </div>
>  <div>
>  </div>
>  <div id=scrollbar style="position: absolute; top: 50px; right: 50px;
> height:298px; width: 18px; border: 1px solid #aaa; background:
> #silver; margin: 0 0 0 auto;">
>   <div id=scrollbar-up-arrow style="height:0; width: 0;border-style:
> solid; border-width: 0 6px 10px 6px; border-color: transparent
> transparent #aaa transparent; position: absolute; top: 3px; left:
> 3px;"></div>
>   <div id=scrollbar-down-arrow style="height:0; width: 0;border-style:
> solid; border-width: 10px 6px 0 6px; border-color: #aaa transparent
> transparent transparent; position: absolute; bottom: 3px; left:
> 3px;"></div>
>  </div>
> 
>  <div id=scrollwidth-content style="position: absolute; width: 378px;
> height: 3px; background: red; top: 150px; left: 100px;"></div>
>  <div id=scrollwidth-paddingleft style="position: absolute; width:
> 50px; height: 3px; background: #f88; top: 150px; left: 50px;"></div>
>  <div id=scrollwidth-paddingright style="position: absolute; width:
> 50px; height: 3px; background: #f88; top: 150px; left: 478px;"></div>
>  <div id=scrollwidth-text style="position: absolute; color: red;
> width: 478px; top: 153px; left: 50px; text-align: center; background:
> #fbb; border-radius: 0 0 8px 8px; padding-top: 2px;">scrollWidth =
> padding-left + content width + padding-right</div>
> 
>  <div id=clientwidth-content style="position: absolute; width: 380px;
> height: 3px; background: blue; top: 200px; left: 50px;"></div>
>  <div id=clientwidth-text style="position: absolute; color: blue;
> width: 380px; top: 203px; left: 50px; text-align: center; background:
> #bbf; border-radius: 0 0 8px 8px; padding-top: 2px;">clientWidth =
> padding width - scrollbar width</div>
> 
>  <div id=border-label style="position: absolute; bottom: 0; left:
> 120px; color: black;">border area</div>
>  <div id=padding-label style="position: absolute; bottom: 50px; left:
> 120px; color: gray;">padding area</div>
>  <div id=content-label style="position: absolute; bottom: 100px; left:
> 120px; color: silver;">content area</div>
> </div>
> 
> (HTML as vector graphic format ftw!)
> 
> ~TJ
>

Received on Tuesday, 17 August 2010 20:46:34 UTC