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
|