Re: [CSS21] Shrink-to-fit

L. David Baron wrote:
> On Wednesday 2005-08-31 17:06 +0200, Staffan Måhlén wrote:
>>I would have expected the above to yield a result very similar to table 
>>column widths;
> 
> In what examples does it not do so?  (Though for tables the available
> width is per-table, not per-column, so the table as a whole behaves
> according to that description, but not each column.)
> 

My testing was of course incomplete, i was testing some absolute 
positioning cases and not other shrink-to-fit cases. When digging a bit 
more it turns out there are inconsistencies in how different cases of 
shrink-to-fit is handled. I don't have that many UAs installed, and 
since one of them cannot really be used to test this type of feature i 
only tried with two browsers.

Essentially, what i (and i think some UAs) may be confused about is what 
the terms: "preferred minimum width" and "preferred width" actually 
refer to. The rec of course states:
"Roughly: calculate the preferred width by formatting the content 
without breaking lines other than where explicit line breaks occur, and 
also calculate the preferred minimum width, e.g., by trying all possible 
line breaks"

The below examples are a quick hack and could contain errors, but might 
help clarify what i am referring to. I expect problems with the first 
two cases are probably more to be considered as UA bugs, but the third 
case i find interesting (but that is the consistently handled one).
  /Staffan







<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>Shrink-to-fit</title>
   <style type="text/css">
     pre {background-color: #eee;}
     .main {padding: 1em; font-size: larger}
     b {text-decoration: underline}

     .cont_ind {border: solid 1px black;}
     .container {height: 10em; position: relative}
     .abs_ind {background-color: red;}
     .abs {position: absolute; top: 5em}
     .float_ind {background-color: green;}
     .float {float: left;}

     .test1 {width: 0}
     .test2 {width: 200px}
     .test3 {width: 500px}

     .min_width {width: 400px; border: solid 2px blue}

   </style>
</head>
<body>
   <h1>Shrink-to-fit</h1>
   <pre class="main">
min(max(preferred minimum width, available width), preferred width).</pre>
   <h2>preferred minimum width != 0? (container width 0)</h2>
   <p>
     The below is a <span class="cont_ind">relative container</span> of 
width 0,
     causing the absolute <span class="abs_ind">positioned</span>
     and the <span class="float_ind">floating</span> boxes to be forced to
     use preferred min width.
   </p>
   <pre>
min(max(preferred minimum width, <b>0</b>), preferred width).</pre>
   <p>
     The <span class="abs_ind">absolute positioned</span>
     and <span class="float_ind">floating</span> boxes should be as wide as
     the text they should contain.
   </p>

   <div class="container cont_ind test1">
     Container
     <div class="float float_ind">
       A_width_less_float
     </div>
     <div class="abs abs_ind">
       Abs_pos_box
     </div>
   </div>



   <h2>Preferred minimum width != calculated content min width?</h2>
   <p>
     The below is a <span class="cont_ind">relative container</span> of 
width
     200px, holding <span class="abs_ind">absolute positioned</span>
     and <span class="float_ind">floating</span> boxes that have contents
     forcing their min/max widhts.
   </p>
   <pre>
min(max(<b>400px?</b>, 200px), preferred width).</pre>
   <p>
     The <span class="abs_ind">absolute positioned</span>
     and <span class="float_ind">floating</span> boxes should be as wide as
     the blue borders.
   </p>

   <div class="container cont_ind test2">
     Container
     <div class="float float_ind">
       <div class="min_width">
         Preferred minimum width is this box.
       </div>
       <div class="max_width">
         Preferred width is this box since it wants to be much wider than
         anything else in the parent.
       </div>
     </div>
     <div class="abs abs_ind">
       <div class="min_width">
         Preferred minimum width is this box.
       </div>
       <div class="max_width">
         Preferred width is this box since it wants to be much wider than
         anything else in the parent.
       </div>
     </div>
   </div>


   <h2>Preferred width versus actual line-breaks</h2>
   <p>
     The below is a <span class="cont_ind">relative container</span> of 
width
     500px, causing the absolute <span class="abs_ind">positioned</span>
     and the <span class="float_ind">floating</span> boxes to be forced to
     decide a width that lies between the minimum possible and preferred 
widths.
   </p>
   <pre>
min(max(<b>width("**opportunity_to_see_how_wide_the_parent_gets.")</b>, 
500px),
     <b>width("this_text_shall_cause_a_single_line_break** 
**opportunity_to_see_how_wide_the_parent_gets."))</b>.</pre>
   <p>
     If the "preferred width" is equivalent with the table style "maximum"
     cell width, the <span class="abs_ind">positioned</span>
     and the <span class="float_ind">floating</span> boxes should be as wide
     as their parent container. Otherwise, the preferred width
     is a new concept that depends on how the lines were actually flowed
     inside the shrink-to-fit item? In the second case,
     the preferred width seems to be something like the closest possible
     actual line break opportunity:
   </p>
   <p>
     preferred width can be either
   </p>
   <p>
     width("this_text_shall_cause_a_single_line_break** 
**opportunity_to_see_how_wide_the_parent_gets.")
   </p>
   <p>
     or
   </p>
   <p>
     max (width("this_text_shall_cause_a_single_line_break**"), 
width("**opportunity_to_see_how_wide_the_parent_gets."))
   </p>

   <div class="container cont_ind test3">
     Container
     <div class="float float_ind">
       <!-- Replace this with two imgs to force specific line-widths
       perhaps-->
       this_text_shall_cause_a_single_line_break** 
**opportunity_to_see_how_wide_the_parent_gets.
     </div>
     <div class="abs abs_ind">
       <!-- Replace this with two imgs to force specific line-widths
       perhaps-->
       this_text_shall_cause_a_single_line_break** 
**opportunity_to_see_how_wide_the_parent_gets.
    </div>
   </div>

</body>
</html>

Received on Friday, 2 September 2005 16:06:36 UTC