Our webs display a lot of text. They're about readability more than
imagery, so the readable text-width is a design consideration that figures
into our layouts perhaps more so than other layouts.
Displays are becoming so wide (1600px and wider), the challenge of designing
the CSS / JavaScript to provide an "optimal" width of readable text is
daunting. It's somewhere around 40ems, but it varies by reader, and using
min-width, max-width to calculate the content DIV width according to the ems
size can be incorrect. Browsers settings of text-size sometimes change the
displayed text size without altering the DOM ems size, so a DHTML min/max
width approach based on ems doesn't work well cross-browser, and it can be
inaccurate in those that do support it.
A layout with the following characteristic might be a good alternative:
(this is where prototype.js comes in)
If the right border of the content div were visible and provided a
hover-effect, the user could click and drag the right border to increase or
decrease the reading width. This border element should be about 3 to 6px
wide.
I assume it's not possible to hover on the right 6px of the content DIV (am
I wrong?), so another element, 6px wide along the right vertical border of
the content DIV is needed. I'm struggling to conceive a reliable
cross-browser element that will mimic a border of the content DIV. I don't
see any way to float an element against the right border of a content DIV
and have it make the same height of the content DIV. The best I can come up
with (which isn't too bad) is tables. The right cell could be 6px wide.
Maybe this is the solution.
Before I run off and build a mock-up, is there any precedent to this? Any
suggestions or comments on the approach appreciated.
Sam
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
