Image alignement

noursbleu's Avatar

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

    noursbleu's Avatar

    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>
    
    
    
  2. Support Staff 2 Posted by fletcher on 29 Nov, 2020 02:15 PM

    fletcher's Avatar

    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

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

    noursbleu's Avatar

    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 !

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

    Dave Hein's Avatar

    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.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

23 Nov, 2021 07:46 PM
10 Jun, 2021 11:53 AM
10 Jun, 2021 01:15 AM
17 Dec, 2020 03:23 PM
08 Dec, 2020 10:49 AM

Recent Articles