How To:
Algorithmically Label Images

This is actually quite simple and is done with "div" statements. First such is the outer wrapper that tells basic data about your image file:

<div class="labelledImage" style="height: IMAGEHEIGHTpx; width: IMAGEWIDTHpx; float: none;">

<img src="IMAGEURL">

...(labelling code)...

</div>

To get the IMAGEHEIGHT/WIDTH and URL, load the image into Mobius and read its properties (I usually ^C copy the URL as it can be quite long).


The labelling code consists of one or more DIV statements, one per label. Each DIV tells where the label is to be placed and what is to be placed there:

<div style="left: LABEL_LEFT_OFFSETpx; top: LABEL_TOP_OFFSETpx" class="centered">LABEL_CONTENT</div>

There is no easy way to get that left and top offset. If you can edit the image in an image editor that can help, otherwise it is just trial & error. Labels can be anything. In the example below the labels are actually MathML code. It is better to do MathML directly this way. You can do it with variables, but then the rendered MathML does not show while editing, only when Previewing. This example results in the triangle you see below:

<div class="labelledImage" style="height: 210px; width: 350px; float: none;">

<img alt="Basic triangle" src="/uwaterloo/web/Math127001/Public_Html/Integration/Applications/Averages/NakedTriangle.png" style="width: 350px; height: 210px;" title="Basic Triangle [IMG:NakedTriangle.png]" />

<div class="centered" style="left: 90px; top: 185px"><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mrow><mi mathvariant="italic">θ</mi></mrow></mrow></math></div>

<div class="centered" style="left: 170px; top: 90px"><math><mrow><mi>x</mi></mrow></math></div>

<div class="centered" style="left: 170px; top: 220px"><math><mrow><mn>1</mn></mrow></math></div>

<div class="centered" style="left: 324px; top: 90px"><math><mrow><msqrt><mrow><msup><mrow><mi mathvariant="italic">x</mi></mrow><mrow><mn>2</mn></mrow></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow></math></div> </div>

</div>

 Triangle labelled by example
 
How-To Index

Main Index

 Updated: 11/11/2021 SMS/DAG