From c36f09a877807a59b690a0fca5c922e0a5ddacf5 Mon Sep 17 00:00:00 2001
From: Freek Pols <c.f.j.pols@tudelft.nl>
Date: Thu, 30 May 2024 13:32:47 +0200
Subject: [PATCH] fix align right

---
 book/basic-features/figures.md | 99 ++++++++++++++++++++++++++++------
 1 file changed, 82 insertions(+), 17 deletions(-)

diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md
index a030b2b..888e0e4 100644
--- a/book/basic-features/figures.md
+++ b/book/basic-features/figures.md
@@ -7,41 +7,107 @@ To add a figure, just copy the figure to the correct directory. Then, in your ma
     ---
     height/width: <height or width in pixels>
     name: <name of the figure>
+    align: left / center / right
+    figclass: left blank or "margin"
     ---
     <Figure caption>
     ```
 ````
-Using the name label, you can refer to the figure as done with {numref}`Figure {number} <demoexample1>`.
 
-You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html). Some examples with different settings:
+For example: 
 
 ````
-    ```{figure}  ../images/TUDelft_logo_rgb.png 
+    ```{figure} ../figures/TUDelft_logo_rgb.png
     ---
-    width: 50%
+    width: 70%
     name: demoexample1
     align: center
     ---
-    example 1: width (50%) as percentage, align right
+    example 1: width (50%) as percentage, align center
+    ```
+````
+
+provides this output, which looks nice.
+```{figure} ../figures/TUDelft_logo_rgb.png
+---
+width: 70%
+name: demoexample1
+align: center
+---
+example 1: width (50%) as percentage, align center
+```
+
+Using the name label, you can refer to the figure as done with {numref}`Figure {number} <demoexample1>`.
+
+You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html).<br> 
+
+There are many settings, for instance aligning right: 
+
+````
+    ```{figure} ../figures/TUDelft_logo_rgb.png
+    ---
+    width: 50%
+    name: demoexample2
+    align: right
+    ---
+    example 2: width (50%) as percentage, align right
     ```
 ````
 
 provides the output:
-<br>
-```{figure} ../images/TUDelft_logo_rgb.png
+
+```{figure} ../figures/TUDelft_logo_rgb.png
 ---
 width: 50%
-name: demoexample1
-align: center
+name: demoexample2
+align: right
 ---
-example 1: width (50%) as percentage, align right
+example 2: width (50%) as percentage, align right
 ```
-<br>
 
-including a figclass sets the figure to the column at the right.
+Aligning right can come with the potential downside (not always wanted) that text is wrapped around the figure. To avoid this one can use `<div>` elements, both before and after the text (make sure to leave an empty line after the <div>!):
 
 ````
-    ```{figure} ../images/TUDelft_logo_rgb.png
+    <div style="clear: both;">
+    and the output
+    </div>
+    <div style="clear: both;">
+
+    ```{figure} ../figures/TUDelft_logo_rgb.png
+    ---
+    width: 50%
+    name: demoexample3
+    align: right
+    ---
+    example 3: width (50%) as percentage, align right with div style
+    ```
+
+    </div>
+````
+
+<div style="clear: both;">
+with the result:
+</div>
+
+<div style="clear: both;">
+
+```{figure} ../figures/TUDelft_logo_rgb.png
+---
+width: 50%
+name: demoexample3
+align: right
+---
+example 3: width (50%) as percentage, align right
+```
+
+</div>
+
+<div style="clear: both;">
+including `figclass: margin` sets the figure to the column at the right.
+</div>
+
+````
+    ```{figure} demo97/demo97_figure1.jpg
     ---
     figclass: margin
     width: 50%
@@ -54,7 +120,7 @@ including a figclass sets the figure to the column at the right.
 
 <br>
 
-```{figure} ../images/TUDelft_logo_rgb.png
+```{figure} demo97/demo97_figure1.jpg
 ---
 figclass: margin
 width: 50%
@@ -63,9 +129,7 @@ name: demoexample2
 example 2:including figclass: margin
 ```
 
-<br>
-
-We made a useful tool to make your figures, just specify all information and the code is produced for you:
+One might quickely forget the code for making figures, here is a useful tool to make your figures, just specify all information and the code is produced for you:
 
 <div id="figuur_formulier">
 
@@ -73,3 +137,4 @@ We made a useful tool to make your figures, just specify all information and the
 <div id="listContainer">
   
 </div> 
+