Floating blocks
A floating block is positioned at the left or right margin while allowing further content to flow around it on the other side. The most common case is an image with text flowing around it like in the examples.
How to
Prepend a block with one of the following two floating marks to make it float, that is to allow content after the floating block to flow beside it on the webpage. The mark should be separated from the block by a space or line break.
:.- floating left (port)
.:- floating right (starboard)
::- cleared
The clearing mark can be prepended to a block to prevent it from flowing around prior floating blocks.
Examples
Floating right
.: [i:airship in hangar]->/stuff/zeppelin.jpg
Here is a right-floating image. It is positioned at the right margin while text can flow around it on its left side.
The floating mark is composed of a dot and a colon. In this example, it has been placed before the image file token in the same line, separated by a space. Alternatively, it could have been placed in the line above the image file token. This makes no difference to the result.
Here is a right-floating image. It is positioned at the right margin while text can flow around it on its left side.
The floating mark is composed of a dot and a colon. In this example, it has been placed before the image file token in the same line, separated by a space. Alternatively, it could have been placed in the line above the image file token. This makes no difference to the result.
Floating left
:.
[i:airship in hangar]->/stuff/zeppelin.jpg
Here is a left-floating image. It is positioned at the left margin while text can flow around it on its right side.
The floating mark, which is composed of a colon and a dot, has been placed in the line above the image file token in this example. Alternatively, it could have been placed before the image file token in the same line, separated by a space. That makes no difference to the result.Here is a left-floating image. It is positioned at the left margin while text can flow around it on its right side.
The floating mark, which is composed of a colon and a dot, has been placed in the line above the image file token in this example. Alternatively, it could have been placed before the image file token in the same line, separated by a space. That makes no difference to the result.
Floating and Clearing
:. [i:airship in hangar]->/stuff/zeppelin.jpg
This example shows the image floating left again with text next to it.
:: However, a second paragraph is supposed not to flow around the image this time. So a clearing mark was prepended to it. The mark consists of two colons. It does not matter whether the mark is on its own line above the paragraph or at the start of the same line, separated by a space.This example shows the image floating left again with text next to it.
However, a second paragraph is supposed not to flow around the image this time. So a clearing mark was prepended to it. The mark consists of two colons. It does not matter whether the mark is on its own line above the paragraph or at the start of the same line, separated by a space.
The difference between the last example and the one preceding it may only become apparent on sufficiently wide screens. Try changing the window size to see how the text flow changes.
For developers
When Aneamal is translated to HTML, a floating or cleared block gets wrapped in an HTML div element with a class attribute whose value is listed in the following table:
| mark | class attribute value |
|---|---|
:. |
_float _port |
.: |
_float _starboard |
:: |
_clear |
In case of headings that are already wrapped in an HTML summary or hgroup element anyway, the classes are added to these elements instead of to a div. The nautical terms port
and starboard
were chosen as left
and right
are already used for a different purpose: basic text alignment.
The third example becomes this in HTML:
<div class='_float _port'>
<figure>
<img src='/stuff/zeppelin.jpg' width='360' height='220' alt='airship in hangar' loading='lazy'>
</figure>
</div>
<p>This example shows the image floating left again with text next to it.</p>
<div class='_clear'>
<p>However, a second paragraph is supposed not to flow around the image this time. So a clearing mark was prepended to it. The mark consists of two colons. It does not matter whether the mark is on its own line above the paragraph or at the start of the same line, separated by a space.</p>
</div>Required stylesheet
Declarations for the classes are necessary in CSS in order for floating block marks to work. Here is a suggestion for rules in the @look.css file:
._float {
margin: 0 0 .5em 0;
}
._port {
clear: left;
float: left;
margin-right: 1em;
}
._starboard {
clear: right;
float: right;
margin-left: 1em;
}
._clear {
clear: both;
}