Basic alignment
Text written in a left-to-right direction such as the English text on this website is usually aligned at the left margin by default. You can set a different preference for your website in @look.css, either for the whole website or for specific features like main headings.
Aneamal supplies alignment marks for those cases where you want to deviate from the usual alignment encoded in your stylesheets.
How to
Place one of the following alignment marks in a line directly above the block that you want to align:
:..- left-aligned
::.- mid-left-aligned
.:.- centered
.::- mid-right-aligned
..:- right-aligned
:.:- justified
Mid-left alignment is similar to left alignment in that all line beginnings are exactly placed above each other. But they are not necessarily placed at the left margin: if all lines are shorter than the available space is wide, then the block of left-aligned lines as a whole gets horizontally centered with mid-left alignment. Mid-right alignment does the same for line endings instead.
Justified text is flush left and right at the same time. To achieve this, the space between letters and words of otherwise shorter lines gets automatically expanded.
Examples
Left-aligned text
:..
Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.
Mid-left-aligned text
::.
Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.
You can only see the difference between left alignment and mid-left alignment, if the available space on your screen is wider than the length of the longest line.
Centered text
.:.
Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.
Mid-right-aligned text
.::
Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.
Again, a difference between mid-right alignment and right alignment below is only visible for text whose lines are shorter than the width of the available space.
Right-aligned text
..:
Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.Jura gur oynpxoveq syrj bhg bs fvtug,
Vg znexrq gur rqtr
Bs bar bs znal pvepyrf.
Justified text
:.:
Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et turdus merula aliqua veniam, quis nostrud exercitation ullamcorpor s commodo consequat. Duis autem vel eum irrure esse molestiae consequat, vel illum dolore eu fugi et iusto odio dignissim qui blandit praesent luptat exceptur sint occaecat cupiditat non provident, deserunt mollit anim id est laborum et dolor fuga distinct.Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut labore et turdus merula aliqua veniam, quis nostrud exercitation ullamcorpor s commodo consequat. Duis autem vel eum irrure esse molestiae consequat, vel illum dolore eu fugi et iusto odio dignissim qui blandit praesent luptat exceptur sint occaecat cupiditat non provident, deserunt mollit anim id est laborum et dolor fuga distinct.
For developers
When Aneamal is translated to HTML, a block with an alignment mark gets usually wrapped in an HTML div element with a class attribute whose value is listed in the following table:
| mark | class attribute value |
|---|---|
:.. |
_align _left |
::. |
_align _mid _left |
.:. |
_align _center |
.:: |
_align _mid _right |
..: |
_align _right |
:.: |
_align _justify |
Hence the first, left-aligned example becomes:
<div class='_align _left'>
<p>Jura gur oynpxoveq syrj bhg bs fvtug,<br>Vg znexrq gur rqtr<br>Bs bar bs znal pvepyrf.</p>
</div>Headings of expandable sections and subsections are not wrapped in a HTML div element though. Instead, the alignment classes are added to the summary element that is already present in their case:
<summary class='_align _center'>
<h2>expandable-section heading</h2>
</summary>Analogously, regular headings with a subline are already wrapped in a HTML hgroup element and classes for alignment are added to that element then.
Required stylesheet
Declarations for the corresponding classes are necessary in CSS in order for the alignment marks to have their desired effect. Here is a recommendation for rules in the @look.css file:
._align :not(._align) {
text-align: inherit;
}
._center {
text-align: center;
}
._justify {
text-align: justify;
}
._left {
text-align: left;
}
._mid {
margin: 0 auto;
width: fit-content;
}
._right {
text-align: right;
}