[LON-CAPA-users] Graphic Display Question

Damien Guillaume damieng at msu.edu
Tue Feb 9 10:29:07 EST 2016


> This is probably a very basic question, but is there an easy way to display a graphic beside its associated text instead of "in line" with it?  In the figure shown below, I would like to display the amplifier symbol to the right of the text rather than above or below it.  Is there an easy way to do that?

The short answer:
Yes, you can just use <img src="../Images/1StageAmpSNR.jpg" 
style="float: right"/> before the text.

The long answer:
This is mostly a question related to HTML rather than LON-CAPA (which 
uses HTML for static content). In today's HTML (HTML5), CSS is always 
used for style and layout. Since this is a question about layout, CSS 
should be used to do that.
Here is a tutorial about image alignment:
http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css
And a tutorial about CSS:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

Note that, unfortunately, LON-CAPA does not currently support CSS well 
for printing, so if you intend to use a document for printing you should 
also try printing to check the result. In the case of "float: right", 
this does not work. Using <img src="../Images/1StageAmpSNR.jpg" 
align="right"/> would work for printing, but the align attribute is 
deprecated since HTML 4.01 and obsolete since HTML5, which means it 
might not be supported by today's web browsers.
In some cases this is better when the CSS style and layout is ignored 
for printing (columns can be narrow).

Damien


More information about the LON-CAPA-users mailing list