admin2/manual_teachbooks
1
0
Fork 0
mirror of https://github.com/TeachBooks/manual.git synced 2026-11-12 22:35:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix align right

Browse source
This commit is contained in:
Freek Pols 2024-05-30 13:32:47 +02:00
parent 72f460809a
commit c36f09a877
1 changed files with 82 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

99
book/basic-features/figures.md
View file

@ -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>