Should standalone figures be displayed next to each other

Development
1

Hello all,

Since Loading... figure elements have display: inline-block; applied. This is inspired by bootstrap for figures (cc @evalica)

Meaning that, given the snipped below, the two figures are displayed side by side in view mode.

image
image2560Ă—771 91 KB

But, this customization is not taken into account by CKEditor, and the two figures are considered as blocks and displayed one below the other.

image
image2560Ă—1291 117 KB

{{figure}}
[[image:...Charlie Chaplin@Charlie_Chaplin_portrait.png]]
{{/figure}}

{{figure}}
[[image:...Charlie Chaplin@Charlie_Chaplin_portrait.png]]
{{/figure}}

Option 1

Make figure display: block; (the default) again.

Cons: this can break how figures created since 10.2 are displayed.

Option 2

Take into account that figure element are displayed “inline” in CKEditor.

Pro: We keep the legacy behavior and view and edit mode are uniform.

In summary, we do you expect the default behavior of sibling figures to be.

Here is my +1 for option 1 and +0 for option 2.

Thanks.

2

Hi, I don’t see any reason to display the figures next to each other when they’re using different standalone blocks. What we display now in view mode is a bug to me.

So for me it’s -0 for option 2 and +1 for option 1.

Thanks

PS: if users want to have figures displayed next to each other they can do so with:

{{figure}}
[[image:...Charlie Chaplin@Charlie_Chaplin_portrait.png]]
{{/figure}}
{{figure}}
[[image:...Charlie Chaplin@Charlie_Chaplin_portrait.png]]
{{/figure}}
3

hmm actually I’m not sure it’s allowed. The HMTL <figure> element is probably always standalone and not inline.

But I still don’t see a good rationale for displaying figures next to each other. Are there examples of that somewhere? You mentioned bootstrap but the link shows only a single figure.

4

small note that it doesn’t look nice to have the images displayed so close. This suggests to me that it was possibly never meant to be displayed like this.

5

Corresponding pull request, currently based on option 1 XWIKI-20823: Standalone Figures are displayed next to each other by manuelleduc · Pull Request #2147 · xwiki/xwiki-platform · GitHub

1 Like
6

Hello @mleduc, @vmassol,

Actually, I looked at this recently because I was wondering why adding a {{figure}} macro inline does not generate a <figure> element but an <img> element. As @vmassol said, the figure html element is not an inline element, cannot be used in inline context.

{{figure}}
[[image:...Charlie Chaplin@Charlie_Chaplin_portrait.png]]
{{/figure}}

{{figure}}
[[image:...Charlie Chaplin@Charlie_Chaplin_portrait.png]]
{{/figure}}

is clearly a syntax for 2 blocks. There is no good reason to have them displayed not as 2 blocks.
It’s interesting that Bootsrap 4 proposes 2 following figures to display one next to the other and that may make sense for the general case, but in the case of this specific XWiki 2.1 syntax, it doesn’t make sense that they’re displayed one next to the other as they are 2 different blocks.

Cons: this can break how figures created since 10.2 are displayed.

It’s a rather rare case (many figures following eachother) and you can consider it a bugfix as the syntax for the case that will change behaviour is clearly that of 2 separate blocks.

Option 1 seems reasonable to me.

We need to figure out though how and whether we want to support “inline figures” - it’s not clear what those would be, though, as the html figure element is not supported in an inline context.
I’m really wondering why Bootstrap made this choice of having the figures inline-block…

7

there is a single figure in the example but the style they chose to add is inline-block. if you put that markup one after the other and it fits in the width of your screen, they will display one next to the other.
I find it indeed a rather odd choice as well, why would they decide to enforce this behaviour…

8

Thanks for your answers. The figure element is not inline-block anymore.