François REMY wrote:
I think your pain is valid, and important.
You'll be happy to learn that there are currently proposals for "module-like" local viewports similar to what you want. An example (taken at random, of course) would be my own proposal http://fremycompany.com/TR/2012/ED-css-viewport/ (which should probably mention that the "vh" and "vw" units will map to the width/height of the element which is set as a local viewport, for its descendants) but some better articles were also written by people at Google last year about why we want something along those lines.
The issue at this point is also somewhat debated in the Responsive community group in the form of ":min-width/:max-width" for which I believe the requirement and problems to solve are close if not identical to the ones faced by an implementation which would satisfy your needs.
I think it's great you provided a reminder to the css group webdevelopers care enough about the problem to find their way up to here to voice their opinion, this is valuable, so thanks!
Above is a reply received from the w3.org mailing list, to my message below:
In CSS, there needs to be a way to specify the specific element you want to base your relative sizing units off of. Relative sizing units shouldn't necessarily be based on a parent element's size, or the page's size, or the viewport. A web module may have numerous child-elements of various depths, and the element you want to base relative sizing units off of might not be an immediate ancestor!
For example, please take a look at the question I posted here:
How to make scalable modules in a div element
I like how the viewport units allow you to scale the contents of a page. I
made this page, and am happy that even the fonts are scaling well on it:
However, my ultimate goal is to be able to create composite web-modules (that are encapsulated by one div element, for example) that can be placed onto any web-page in a manner that a webmaster can scale that element's contents just by simply setting the divs height and width. To do this, I really need relative sizing units to be base on a particular element -- the one that encapsulates
my entire web-module.
To some degree, this can be achieve with % units, but not for font-size! I have not found a relative font-size unit that can be based on the size of a parent element. If a webmaster put my self-made module onto his page, my font-sizes will be based on this size of his page, and NOT base on the size he decided to set my module.
Viewport units work great if you web-module is the size of the viewport; resizing the window makes even fonts re-size proportionately.
The web is getting very close to offering the same scalable modules of non-web technologies such as QML and WPF.
If CSS could offer a way for a webmaster to "specify a particular element that relative sizing units are to be base on", this seems perfect.
Again, a web module may have numerous child-elements of various depths, and the element you want to base relative sizing units off of might not be an immediate ancestor and it might not be the page as whole. For a web module, you want relative size of fonts and everything else to be based on that module's size (not the page as a whole).
CSS should be so flexible, that I can create an independent module and you can put it onto your page, and by simple setting my modules height, width, and location: everything contained in that module scales proportionately to your environment. If you make the size of my module super small, the fonts should be super small, not based on the page as a whole.