Skip to content

Instantly share code, notes, and snippets.

@akiross
Created May 10, 2021 10:25
Show Gist options
  • Save akiross/1ed04769792297b94d007b2adfa92c29 to your computer and use it in GitHub Desktop.
Save akiross/1ed04769792297b94d007b2adfa92c29 to your computer and use it in GitHub Desktop.
Markdown image alignment concept
# 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