New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

figure element #48

Closed
iNerdier opened this Issue Apr 18, 2013 · 29 comments

Comments

Projects
None yet
6 participants
@iNerdier
Copy link

iNerdier commented Apr 18, 2013

I’ve been trying to write lately with kramdown's markdown parser and I’ve come across two problems that seem to unsolvable in the current release.

One is that there seems to be no way to stop kramdown from wrapping image links in

tags. This is often fine but when paired with something like

p + p {
    text-indent: 1em;
}

the results are less than happy, images inherit unwanted text stylings and go all over the shop.

Markdown is smart enough not to add tags to existing block level elements, could the same method be used to allow specifying of stand-alone images?

If this is unfeasible or undesirable, could it be possible to allow it via an option ( say :image_block => true )

The second problem is attempting to use html5's new

and elements. According to can I use it all major browsers now support them and they’re certainly a great help in writing articles with images that need citations or have direct references to text.

Looking through google to see if anyone has attempted it I found https://github.com/michelf/php-markdown/wiki/HTML5-update which seems to have a pretty useful starting point for working out a syntax to use them.

Would either of these problems be something we might be able to do something about?

@ghost ghost assigned gettalong Apr 19, 2013

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Apr 20, 2013

You can already avoid paragraph tags for images like this:

this is 

{::nomarkdown}
<img test="test" />
{:/}

this is

results in

<p>this is </p>

<img test="test" />

<p>this is</p>

And you can already use <figure> and <figcaption>:

<figure markdown="1">
<figcaption>
test
</figcaption>
![test](img.jpg)
</figure>

gives you

<figure>
  <figcaption>
test
</figcaption>
  <p><img src="img.jpg" alt="test" /></p>
</figure>

I have currently no intention to provide extra syntax HTML5 specific tags like <figure>, <article>, ...

@AvverbioPronome

This comment has been minimized.

Copy link

AvverbioPronome commented Nov 3, 2017

I'm probably late to this, but I like a lot how Pandoc handles this: if an image is in a paragraph on its own, it becomes a figure, and its alt-text is used as caption.

@RoyiAvital

This comment has been minimized.

Copy link

RoyiAvital commented Mar 3, 2018

Any chance having syntax for Figure?

Something like using the alt-text as caption as suggested by @9peppe ?

Thank You.

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Mar 3, 2018

I can imagine providing a new option for changing the behaviour of how paragraphs with only an image are converted, similar to how the LaTeX converter currently does it - see https://github.com/gettalong/kramdown/blob/master/lib/kramdown/converter/latex.rb#L71

@9peppe / @RoyiAvital What should the output for the following kramdown fragment should be if the option to convert standalone images is activated?

This is a para with an ![image](some.jpg).

![standalone image](some.jpg)

Note that the alternative text of the image cannot contain markup, it is just text.

@gettalong gettalong reopened this Mar 3, 2018

@AvverbioPronome

This comment has been minimized.

Copy link

AvverbioPronome commented Mar 3, 2018

I'd say

<p>This is a para with an <img alt="image" src="some.jpg" /></p>

<figure id="someid">
  <img alt="standalone image" src="some.jpg" />
  <figcaption>standalone image</figcaption>
</figure>
@RoyiAvital

This comment has been minimized.

Copy link

RoyiAvital commented Mar 4, 2018

3 Remarks (Though I'm not sure they are doable):

  1. Could we have a flag of some kind to whether use Figure or regular Image element?
    Maybe something like ![standalone image figure="true"](some.jpg).
  2. Currently kramdown allows adding HTML using ![standalone image](some.jpg){:class="center-img"}. It should be kept.
  3. In Pandoc they created reference system using \tag. Is there an option doing so here as well?
@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Mar 4, 2018

@9peppe If the image had an ID assigned, should it then be on the figure tag or on the img tag?

@RoyiAvital

ad 1) No. If the new option to process a paragraph with a single item being an image is activated, the output is changed. The only way this would be doable would be via the option value itself.

ad 2) The parser is not touched, only the output is changed.

ad 3) I don't know what you mean. If you set an id on the image, you can use that id later.

@AvverbioPronome

This comment has been minimized.

Copy link

AvverbioPronome commented Mar 4, 2018

I don't know. I think it will depend on individual use cases. But if we apply it to figure, then we can use css selectors like #id img.

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Mar 4, 2018

That's what I was thinking, i.e. class and id attributes are transferred to the figure tag, all others stay with the image.

@RoyiAvital

This comment has been minimized.

Copy link

RoyiAvital commented Mar 4, 2018

@gettalong ,
First thank you for the answer and the openness.
Could you explain:

ad 1) No. If the new option to process a paragraph with a single item being an image is activated, the output is changed. The only way this would be doable would be via the option value itself.

Thank You.

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Mar 4, 2018

@RoyiAvital I'm against changing the kramdown parser. Therefore the way to specify how a paragraph with only an image should be rendered is via the new option that changes how the converter works. E.g. if the option's value is "figure", then a figure tag is rendered, if it is "image" than just the image without enclosing paragraph tags is rendered.

@RoyiAvital

This comment has been minimized.

Copy link

RoyiAvital commented Mar 4, 2018

I see.
How could one which uses GitHub Pages could control this?

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Mar 6, 2018

I don't really know Github Pages nor use it, but since it is based on Jekyll I guess it provides the ability to define kramdown options and through this facility one could also set the new option.

@mb21

This comment has been minimized.

Copy link

mb21 commented Mar 10, 2018

In pandoc, when its implicit figure extension is enabled, you can append a newline to mark individual images as non-figures.

About where to put the class and id, there's an issue open about that.

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jun 24, 2018

So, to sum up:

![standalone image](some.jpg){:#id .class}

will be rendered into

<figure id="id" class="class">
  <img alt="standalone image" src="some.jpg" />
  <figcaption>standalone image</figcaption>
</figure>

iff the new option 'standalone_image' is true. If it is not (the default value for the option), then the current behaviour doesn't change.

@9peppe @RoyiAvital Any comments?

@RoyiAvital

This comment has been minimized.

Copy link

RoyiAvital commented Jun 24, 2018

@gettalong ,
It looks great!

2 edge cases I thought about
What happens when:

![standalone image](some.jpg)

Could we have:

<figure>
  <img alt="standalone image" src="some.jpg" />
  <figcaption>standalone image</figcaption>
</figure>

Or even farther, for:

![standalone image](some.jpg){:#id}

Having:

<figure id="id">
  <img alt="standalone image" src="some.jpg" />
  <figcaption>standalone image</figcaption>
</figure>
@RoyiAvital

This comment has been minimized.

Copy link

RoyiAvital commented Jul 20, 2018

@gettalong ,
Any update on that?

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jul 21, 2018

I'm rather busy right now, so this change together with a new release will probably be in August.

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jan 20, 2019

@RoyiAvital I have implemented this now with a slight change of functionality: If you want to have a standalone image, use the special standalone IAL reference on the image, ie.

![standalone image](some.jpg){:standalone}

@gettalong gettalong closed this Jan 20, 2019

@Faegy

This comment has been minimized.

Copy link

Faegy commented Jan 20, 2019

@gettalong Any commit to reference in order to track this feature's availability?

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jan 20, 2019

Will be pushed shortly!

@AvverbioPronome

This comment has been minimized.

Copy link

AvverbioPronome commented Jan 20, 2019

use the special standalone IAL reference on the image, ie.

I don't understand this. Why are we introducing a behavior not seen in any markdown parser? (a big part of my initial request had to do with using the same source with multiple parsers, even if I did not make that clear)

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jan 20, 2019

To make it possible to have both worlds. This new functionality is backwards compatible, so no problem. And if you use another library that supports kramdown, it will also just work, using the default output of that library.

@AvverbioPronome

This comment has been minimized.

Copy link

AvverbioPronome commented Jan 20, 2019

Yeah, but it does not make sense. img is an inline element, not a block level one, a standalone img should be treated as a block level element, thus I think it should either be in p or figure, depending on the chosen doctype. We well never have both worlds in the same document.

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jan 20, 2019

Actually, <img /> is an inline and a block tag. So in Markdown one has to choose and in case of kramdown, <img /> is treated as an inline tag. This means that internally an image is always wrapped inside a paragraph.

Now, with these changes one can choose how a standalone image is shown: either as a paragraph with an image (default) or as a figure element. This has nothing to do with a doctype.

@AvverbioPronome

This comment has been minimized.

Copy link

AvverbioPronome commented Jan 20, 2019

Actually, img was an inline element, now it's replaced content and shown inline by default. But I don't want to fight over this.

Doctype matters because there is no figure element before html5. So the best option would imho be <p><img /></p> if the parser knows it's producing html4 (and by default, too, it's ok), but <figure><img /></figure> if the parser knows it's producing html5. Better?

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jan 20, 2019

The doctype is not known by kramdown. It just outputs valid HTML. With the current implementation, the user can choose how to display standalone images regardless of the doctype, on a case-by-case basis.

@mb21

This comment has been minimized.

Copy link

mb21 commented Jan 20, 2019

So either you use the global standalone_image option, or you can use {:standalone} on a image by image basis, correct? If so, that seems sensible to me (although I would be mostly interested in the global option, and I might have called it something figure).

@gettalong

This comment has been minimized.

Copy link
Owner

gettalong commented Jan 20, 2019

There is no global standalone_image option, currently. As I mentioned before I decided to go with the IAL reference. If a global option is still needed, this would have to wait for another release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment