ABOUT BINDING TEXT TO IMGS

Pages with various practices of mine:

http://www.psy.gla.ac.uk/~steve/localed/tintopics.html

http://www.psy.gla.ac.uk/~steve/myNewWave/mhealth.html

http://www.psy.gla.ac.uk/~steve/

http://www.psy.gla.ac.uk/~steve/php/css/imgtest.html


======================

0) DOC on thumbnail images ... DOCclip

1) See basic notes on align of imgs, to get text flowing round imgs in 3
different ways. (DOCcss)

2) Get a simple IMG centered on page e.g. as a fig.,
			(but no text flowing round it).

<DIV style= " Qborder: 1px solid red;
           text-align: center;">
  <IMG src="keynote.slide2.pdf" style="border: 1px dotted black;
width:65%;">
</DIV >
This uses a DIV as a bounding box; and it naturally expands to full-width
	in the current layout context of the DIV's parent.
Text align center then moves IMG to centre (L2R).
	I.e. Text-align works to center IMG within DIV.
Width: on IMG scales the pic to look right manually to my eye
			(if it has text in the img).
	(Width is spec only once; and I use it to scale the pic.'s
		original size to fit the space here.)

WOULD LIKE TO BUT SO FAR CAN'T: centre on the page (not rel. to Div's context).
           position: absolute; margin-left:0; doesn't work.
margin-left: -5em;  this works;,
	But only got 5em  by trial and error to rep. the width of the indent
	of the main text at this point from the LH of the window.
margin-left: 0vw;  doesn't work, but should?
The diff of vw and % seems to be 3em too big in magnitude. Have to get rid of
width of scroll bar? More?

NEW CSS SYNTAX
margin-left: -calc(100vw - 100%)em; won't take units there.
calc(0px - var(--diff3)); that is the way to negate a nmb. Must have px unit
calc(8px + -50%) : calc requires sp.s around op.s; no-sp means negation for -

How could I use calc()?
	NB: calc(100% - 60px); syntax in css.  Need sps around the op.(s).

width: 100vw; These are "view window" units, i.e.like % but of the window not
	the current layout width.
transform: translate(-50%, -50%);
	Another tool: set things up then shift whole object.

3) To get text bound to an IMG do (as part of <IMG >)(e.g.):
 style="margin-right: 0.3em;"  ALIGN="LEFT"     VALIGN="middle"
 or style="margin-right: 0.3em; float:left;"     VALIGN="middle"
 (puts IMG to left; and a margin/space on its right before text starts.)

Also: may need to wrap the assoc text in its own <DIV style="text-align:left;">
        SPAN doesn't work for this; may have to override something else
        setting text-align.
The IMG will be to left or right of the whole space if its ALIGN is set;
yet the text will be justified in the remaining space's full width.
Or use ? SPAN with its align, not text-align, set like IMG's?

4) Could use a table, with two rows, one col to control placing of text and
img.

5) Could use a table with <CAPTION> (and a 1row, 1col for holding img).
<CAPTION>Monthly savings</CAPTION> (Must be directly after <table> tag.)
style for caption may be -- text-align: center/left/right;
	 caption-side: bottom / top / right / left;
NO LONGER SUPPORTED 

6) Using a wrapping <SPAN>:
6.0) E.g.
<SPAN 
	display:inline-block;     border: 1 solid green; 
	style="float: right;    text-align: left;
	max-width: 50%;">
<IMG  style="float:left;   margin-right: 0.5em;" > ... text </SPAN>


6.1) A binding SPAN to bind img and text, set to:
display: inline-block;
	(Other objects e.g. FORMs in the outer context outside the SPAN also
	need to have display: inline-block; )
max-width: 50%;
	to stop the bound SPAN dropping down to next line in its outer context.
The IMG (or surrounding <A ..> float:left / right; to control rel. of text and
	img within the SPAN.
To bind the text under (rather than to right of) the IMG, use:
i) <BR> at start of text;
ii) Cancel any float: of IMG within the SPAN.

6.2) In general, bind together items that are needed with SPAN (inner action);
and have these clumps laid out in outer context by layout algos, deciding line
breaks, general alignment left/right,  etc.