Created
May 10, 2021 10:25
-
-
Save akiross/1ed04769792297b94d007b2adfa92c29 to your computer and use it in GitHub Desktop.
Markdown image alignment concept
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Concept for specifying alignment in markdown/rst/similar thing | |
Specifying how to align images, text etc in markdown is not great. | |
Here's a concept on how that could be written | |
The following image is on the left: | |
|[1]-| | |
[1]: image.png | |
The following image is centered: | |
|-[1]-| | |
[1]: image.png | |
The following image is on the right: | |
|-[1]| | |
[1]: image.png | |
Each dash is an "horizontal filler". They will get the space divided evenly. | |
The following is still centering horizontally: | |
|---[1]---| | |
[1]: image.png | |
So, using multiple `-` might be useful to improve readability. You could even do | |
something very "extreme" and use 80 columns, if you want: | |
|------------------------------------[1]---------------------------------------| | |
[1]: image.png | |
Whether it's prefectly centered or not is not clear, though. It's better to make | |
proportions clear, probably. | |
The following, for example, will "center" the image leaving twice the space | |
on the right than it is on the left: | |
|-[1]--| | |
[1]: image.png | |
No fillers means to stretch the image: from side to side. | |
|[1]| | |
[1]: image.png | |
Multiple images can be specified as well! This is conveniently centering two | |
images with no spaces between them: | |
|-[1][2]-| | |
[1]: http://images.com/image.jpg | |
[2]: table.png | |
While in the following, the space wrapping the images is the same: | |
|--[1]--[2]--| | |
[1]: http://images.com/image.jpg | |
[2]: table.png | |
This notation is useful also to specify how the *text wrapping* should behave. | |
Say, for example, that you want a paragraph with an image on the right, wrapping | |
text around it (on its left). Easy peasy: | |
|~~[1]| | |
[1]: table.png | |
Using ~ in place of - means that you want to place text in that space. An image | |
centered with text on both sides would be like this: | |
|~~[1]~~| | |
[1]: table.png | |
Mixing text and spaces is not supported, though. The presence of `~` will bring | |
the text in, no matter how many `-` you have. For example, these are the same: | |
|[1]~~~| | |
|[1]~--| | |
|[1]--~| |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment