tag:support.fletcherpenney.net,2013-02-12:/discussions/suggestions/341-image-alignementMultiMarkdown: Discussion 2021-05-09T18:18:07Ztag:support.fletcherpenney.net,2013-02-12:Comment/488639222020-11-29T10:10:17Z2020-11-29T10:10:19ZImage alignement<div><p>Hi !<br>
One an specify image alignement, passing for example <code>![legend](images/myimage.png width="3cm" align="right")</code><br>
-> If this is just an image (inline mode) all is ok because this is rendered via: <code>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:</code>html <figure> <img src="images/myimage.png" align="right" style="width:2cm;"/> </figure> If <code>align="right"</code> or <code>align="left"</code> is specified, this could be translated into this for a better behavior:<br>
```html<br>
<img src="images/myimage.png"><br></p>
<pre>
<code>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.<br><br>
<br>What do you think about it ?
Thank you !
Best regards,
Nicolas</code>
</pre></div>noursbleutag:support.fletcherpenney.net,2013-02-12:Comment/488639222020-11-29T10:14:33Z2020-11-29T10:14:35ZImage alignement<div><p>Hi !<br>
One an specify image alignement, passing for example <code>![legend](images/myimage.png width="3cm" align="right")</code></p>
<p>-> If this is just an image (inline mode) all is ok because this is rendered via:</p>
<pre>
<code> <img src="images/myimage.png" align="right" style="width:2cm;"/></code>
</pre>
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:
<pre>
<code><figure> <img src="images/myimage.png" align="right" style="width:2cm;"/> </figure></code>
</pre>
If align="right" or align="left" is specified, this could be translated into this for a better behavior:
<pre>
<code><figure style="float:right;"> <img src="images/myimage.png" style="width:2cm;"/> </figure></code>
</pre>
<pre>
</pre></div>noursbleutag:support.fletcherpenney.net,2013-02-12:Comment/488639222020-11-29T14:15:28Z2020-11-29T14:15:28ZImage alignement<div><p>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.</p>
<p>One of the design principles of MultiMarkdown is to handle the majority of functionality that the majority of users need. Not sure this qualifies.</p>
<p>You could also look at using CSS to handle this as well.</p>
<p>Thanks!</p>
<p>Fletcher</p></div>fletchertag:support.fletcherpenney.net,2013-02-12:Comment/488639222020-12-02T14:25:54Z2020-12-02T14:25:56ZImage alignement<div><p>Hi.</p>
<p>Thank you for your answer and for thinking about it.<br>
It would add flexibility and it would be almost complete for a lot of things.<br>
Big last thing would be vertical merging of cells in a tab, and your app could be used<br>
in scientific world.</p>
<p>Thank you !</p></div>noursbleutag:support.fletcherpenney.net,2013-02-12:Comment/488639222020-12-17T15:23:38Z2020-12-17T15:23:40ZImage alignement<div><p>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.</p>
<p>It's not possible to properly style the image/figure if that is not done.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>I think that one change would resolve most of the headaches around this issue and would help avoid embedding HTML in the markdown.</p></div>Dave Hein