aboutsummaryrefslogtreecommitdiffhomepage
path: root/print.html
diff options
context:
space:
mode:
authorjohannst <johannst@users.noreply.github.com>2024-03-19 23:17:46 +0000
committerjohannst <johannst@users.noreply.github.com>2024-03-19 23:17:46 +0000
commit3f3ba03ab0832ee382166aa37ce923631eeb10e4 (patch)
treee5e06f4c8fd41aa2a3233f5d3a3d9a5826885ed2 /print.html
parent301c57576bd03caddf6493afaa8649a155897ae2 (diff)
downloadnotes-3f3ba03ab0832ee382166aa37ce923631eeb10e4.tar.gz
notes-3f3ba03ab0832ee382166aa37ce923631eeb10e4.zip
deploy: 5590e4c45bb868a8fa4610a1273ad131a3ee6354
Diffstat (limited to 'print.html')
-rw-r--r--print.html102
1 files changed, 102 insertions, 0 deletions
diff --git a/print.html b/print.html
index 10645cd..33cea34 100644
--- a/print.html
+++ b/print.html
@@ -6249,6 +6249,108 @@ window.onload = () =&gt; {
&lt;div class = "content arm x86"&gt;arm x86&lt;/div&gt;
&lt;div class = "content x86"&gt;x86&lt;/div&gt;
</code></pre>
+<h1 id="floating-figures-with-caption"><a class="header" href="#floating-figures-with-caption">Floating figures with caption</a></h1>
+<p><a href="web/src/figure.html">Rendered html</a></p>
+<pre><code class="language-html">&lt;style&gt;
+img {
+ width: 100%;
+ height: auto;
+}
+figure {
+ width: 20%;
+}
+&lt;/style&gt;
+
+&lt;!-- EXAMPLE 1 ----------------------------------------------------------------&gt;
+
+&lt;figure style="float: left;"&gt;
+ &lt;img src="grad.png"&gt;
+ &lt;figcaption&gt;Fig 1: wow such colors&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;i&gt;
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar
+pellentesque habitant morbi tristique senectus et netus et malesuada. Sem
+fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus
+pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet
+nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam
+malesuada bibendum arcu vitae elementum curabitur.
+&lt;/i&gt;&lt;/p&gt;
+
+&lt;figure style="float: right;"&gt;
+ &lt;img src="grad.png"&gt;
+ &lt;figcaption&gt;Fig 2: wow such colors again&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;i&gt;
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis.
+&lt;/i&gt;&lt;/p&gt;
+
+&lt;!-- EXAMPLE 2 ----------------------------------------------------------------&gt;
+
+&lt;hr style="clear: both"&gt;
+
+&lt;figure style="float: left;"&gt;
+ &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+Floats can be next to each other on the same height.
+
+&lt;figure style="float: right;"&gt;
+ &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+&lt;!-- EXAMPLE 3 ----------------------------------------------------------------&gt;
+
+&lt;hr style="clear: both"&gt;
+
+&lt;figure style="float: left;"&gt;
+ &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+The css property &lt;code&gt;clear: {left, right, both};&lt;/code&gt; controls how elements
+should be handled relative to the previous floating element.
+
+&lt;figure style="float: right; clear: left;"&gt;
+ &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;i&gt;
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere.
+&lt;/i&gt;&lt;/p&gt;
+
+&lt;!-- EXAMPLE 4 ----------------------------------------------------------------&gt;
+
+&lt;hr style="clear: both"&gt;
+
+&lt;div style="overflow: auto; border: 2px solid red;"&gt;
+&lt;figure style="float: left;"&gt;
+ &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+&lt;code&gt;overflow: auto&lt;/code&gt; gives an alternative to &lt;code&gt;clear&lt;/code&gt; to
+control placement of the floats. The red boarder visualizes the size of the
+&lt;code&gt;&amp;ltdiv&amp;gt&lt;/code&gt; block, you can remove the &lt;code&gt;overflow&lt;/code&gt; property
+and observe how the border changes.
+&lt;/div&gt;
+
+&lt;figure style="float: right;"&gt;
+ &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+</code></pre>
<div style="break-before: page; page-break-before: always;"></div><h1 id="css"><a class="header" href="#css">css</a></h1>
<h2 id="selector"><a class="header" href="#selector">selector</a></h2>
<p><code>.moose</code> element with class</p>