Home → Suggestions →

Image alignement

• Edit

noursbleu

29 Nov, 2020 10:10 AM

Hi !
One an specify image alignement, passing for example ![legend](images/myimage.png width="3cm" align="right")
-> If this is just an image (inline mode) all is ok because this is rendered via: html <img src="images/myimage.png" align="right" style="width:2cm;"/> <pre><code>-&gt; If the image is the only thing specified in paragraph, mmd transform it to a figure. And then, alignement is not working, because this is translated into:html <figure> <img src="images/myimage.png" align="right" style="width:2cm;"/> </figure> If align="right" or align="left" is specified, this could be translated into this for a better behavior:
```html

I made an GUI editor for mmd and I wrote a parser to alter this, and it works like a charm:
-> no align specified : use css specs
-> align right or left, pass to figure tag via float style.




What do you think about it ?
Thank you !
Best regards,
Nicolas

1. 1 Posted by noursbleu on 29 Nov, 2020 10:14 AM

   

   Hi !
   One an specify image alignement, passing for example ![legend](images/myimage.png width="3cm" align="right")

   -> If this is just an image (inline mode) all is ok because this is rendered via:

    <img src="images/myimage.png" align="right" style="width:2cm;"/>
   

   If the image is the only thing specified in paragraph, mmd transform it to a figure. And then, alignement is not working, because this is translated into:

   <figure> <img src="images/myimage.png" align="right" style="width:2cm;"/> </figure>
   

   If align="right" or align="left" is specified, this could be translated into this for a better behavior:

   <figure style="float:right;"> <img src="images/myimage.png" style="width:2cm;"/> </figure>
   

   • Edit

2. Support Staff 2 Posted by fletcher on 29 Nov, 2020 02:15 PM

   

   I'll consider it in the future when I have more time, but I suspect this is getting too deep in the weeds to be a core feature of MultiMarkdown. It is likely better handled with raw HTML.

   One of the design principles of MultiMarkdown is to handle the majority of functionality that the majority of users need. Not sure this qualifies.

   You could also look at using CSS to handle this as well.

   Thanks!

   Fletcher

   • Edit

3. 3 Posted by noursbleu on 02 Dec, 2020 02:25 PM

   

   Hi.

   Thank you for your answer and for thinking about it.
   It would add flexibility and it would be almost complete for a lot of things.
   Big last thing would be vertical merging of cells in a tab, and your app could be used
   in scientific world.

   Thank you !

   • Edit

4. 4 Posted by Dave Hein on 17 Dec, 2020 03:23 PM

   

   Fletcher, if MMD is generating a figure element then the attributes specified in the markdown should be added to the figure element and not the img element within the figure.

   It's not possible to properly style the image/figure if that is not done.

   Nowadays, HTML5 document styling is done by assigning classes (via the "class" attribute) to HTML elements and using those classes to assign CSS styles from a style sheet. This keeps the HTML clean (no style blocks or verbose style attributes) and allows the powerful CSS selection capability to fully control document styling in a flexible and efficient way.

   If I specify a "class" attribute in the markdown, and that class attribute is assigned to the img element rather than the containing figure element, then I have no way of using CSS to style some figures differently that others. And the img elements in every figure are constraint to however the figure element is styled globally.

   If the "class" attribute gets assigned to the figure then I can use CSS to selectively style both the figure element and the contained img element, using different styles for different combinations of classes.

   I think that one change would resolve most of the headaches around this issue and would help avoid embedding HTML in the markdown.

   • Edit