[pmwiki-users] Re: what script

[Bronwyn Boltwood]

On 8/12/05, Radu <radu at monicsoft.net> wrote:
> I tried to use something similar to lframe, but the only way I can
> see it is by using a one-cell table. As I was saying, a centered
> image takes over all the space around it.
> 
> Of course, there are ccs-ers better than me around the list. They may
> come up with a better way.

Summary:  Good design dictates that if your image isn't big enough to
take up (almost) the entire column, float it instead of centering it.

Long version full of HTML/CSS and design theory follows.  You'll need
to read it in a monospace (typewriter) font.

HTML Elements (tag plus its contents) can be block or inline elements.
 Block elements default to 100% of the width available to them, for
the most part -- I believe tables shrink to fit, though -- and that is
why it's "taking over the space around it", if your cframed image is a
block element.  Inline elements are only as big as neccessary to hold
their contents -- e.g. links or span tags.  But while inline elements
can have borders, margins, padding etc. on, most methods to center
them won't do you much good because as an inline element, the stuff
around it is what dictates where it ends up.

I suppose you could experiment with display:inline-block and
positioning properties, but I have no idea if you'll be able to do
what you want.  I never tried it.  Even if you use a table to provide
a frame, you still can't have text flow freely around a centered
image.

Floats would be the perfect solution except that there is no
float:center, and I'll show you why.  What would happen to the text
that must flow around the image, if we did have float:center?

(I) Text could turn into two narrow columns temporarily:

Lorem ipsum dolor sit amet consectetuer malesuada arcu aliquet auctor
vel. Pellentesque et sed Integer Vestibulum nunc Donec est pretium
pretium Cras. At cursus id interdum elit pellentesque tellus nunc 
This is a sentence        ------------------    This is a sentence     
which should be on the    |                |    which should be on the 
LEFT of the image.        |                |    RIGHT of the image.    
This is a sentence        |                |    This is a sentence     
which should be on the    |                |    which should be on the 
LEFT of the image.        ------------------    RIGHT of the image.    
semper libero Phasellus. Aliquam elit at urna Phasellus Sed et ligula
venenatis cursus lobortis. Tellus at nec eros Cras nibh Cras ipsum
elit Suspendisse.

(II) Text could be one wide column with an image in its middle, where
a sentence begins to the left of the image, and finishes to the
image's right.

Lorem ipsum dolor sit amet consectetuer malesuada arcu aliquet auctor
vel. Pellentesque et sed Integer Vestibulum nunc Donec est pretium
pretium Cras. At cursus id interdum elit pellentesque tellus nunc 
This is a sentence        ------------------    which straddles the 
floated image, but        |                |    does the reader know
that?  I'm not really     |                |    sure if the reader 
understands what is       |                |    going on here, since   
this is not a long-       |                |    standing print design 
tradition, but a new      ------------------    thing under the sun.  
semper libero Phasellus. Aliquam elit at urna Phasellus Sed et ligula
venenatis cursus lobortis. Tellus at nec eros Cras nibh Cras ipsum
elit Suspendisse.

Both of the solutions above can be represented with this line-and-box diagram:

------------------------------------------------------------------------------  
------------------------------------------------------------------------------  
-------------------- ************************************ --------------------  
-------------------- *                                  * --------------------  
-------------------- *                                  * --------------------  
-------------------- *                                  * --------------------  
-------------------- ************************************ --------------------  
------------------------------------------------------------------------------  
------------------------------------------------------------------------------  

That is why both of them suck.  You can't tell them apart without
having to very carefully read the text!

Print design, of course, has different solutions at its disposal,
because it has the multi-column grid.  (To see one in action, look at
a newspaper.)  It permits more and better choices for centering images
-- ones where even a line-and-box diagram plus basic literacy will
tell you how the text flows.  For our examples, let's use a
four-column grid.

(1) Size your image to be one column wide and drop it in where you need it.  
(2) Like (1), but with an image two, three, or N columns wide.
(3) Place an image exactly between two columns, or straddling more. 
Let it interrupt the central columns as necessary, and the columns
that are not entirely interrupted flow around the image.

With a small image:

------------------  ------------------  ------------------  ------------------  
------------------  ------------------  ------------------  ------------------  
------- ********************** -------  ------------------  ------------------  
------- *                    * -------  ------------------  ------------------  
------- *                    * -------  ------------------  ------------------  
------- *                    * -------  ------------------  ------------------  
------- ********************** -------  ------------------  ------------------  
------------------  ------------------  ------------------  ------------------  
------------------  ------------------  ------------------  ------------------  

With a large image:

------------------  ------------------  ------------------  ------------------  
------------------  ------------------  ------------------  ------------------  
----------- ****************************************************** -----------  
----------- *                                                    * -----------  
----------- *                                                    * -----------  
----------- *                                                    * -----------  
----------- ****************************************************** -----------  
------------------  ------------------  ------------------  ------------------  
------------------  ------------------  ------------------  ------------------  

Plus, we haven't even addressed the problem of justification -- web
browsers do such lousy justified text that no-one uses it, and print
layouts like these demand decently justified text.

What it boils down to is that pixels and paper have their own design
patterns, and we haven't had pixels long enough to learn their
patterns well.  Print design has given dimensions; web design doesn't.
 It's a much harder challenge, and that's why fixed-width layouts are
so popular: the designer wrests some control from the reader, and so
doesn't have to work as hard to get an equally pleasing result.

Bronwyn