Using spans instead of `<figure*>`

`<figure>` and `<figcaption>` are better in terms of semantics, but
heavily limit the abiliy to nest them into other elements, as they're
block-elements themselves.

This is especially the case when used as inline images, because browsers
will pop them out of the flow.

diff --git a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
index b4f206b367377cedd577e54b65cea71838240d94..a988ab095cbdb1fc987e0136100b1a5698421c0d 100644 (file)
--- a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
@@ -1,4 +1,4 @@
-<figure class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/if}">
+<span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/if}">
        {if $thumbnailSize != 'original'}
                <a href="{$media->getLink()}" class="embeddedAttachmentLink jsImageViewer"><img src="{$media->getThumbnailLink($thumbnailSize)}" alt="{$media->altText}" title="{$media->title}"></a>
        {else}
@@ -6,6 +6,6 @@
        {/if}
                
        {if $media->caption}
-               <figcaption>{$media->caption}</figcaption>
+               <span class="mediaBBCodeCaption">{$media->caption}</span>
        {/if}
-</figure>
+</span>

diff --git a/wcfsetup/install/files/style/bbcode/media.scss b/wcfsetup/install/files/style/bbcode/media.scss
index b8613ae1d6b386d81f9a23e209bb2e56fbb1c908..11aaccabe755c7783711825b0ed19f33ba7bc5b4 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/media.scss
+++ b/wcfsetup/install/files/style/bbcode/media.scss
@@ -1,8 +1,9 @@
 .mediaBBCode {
        display: inline-block;
        
-       figcaption {
+       .mediaBBCodeCaption {
                color: $wcfContentDimmedText;
+               display: block;
                margin-top: 5px;
                text-align: center;