asciidoc floating images not working

[kovidgoyal]

Floating images via [role=left] does not work in the github rendered version of asciidoc. See for example:
https://github.com/kovidgoyal/kitty/blob/c8fc0394e3cca8f659d8833aab8bb25762865be9/README.asciidoc

That document when redered using asciidoctor has a floating image, as expected, but not when rendered by github.

[mojavelinux]

GitHub strips away CSS classes and inline CSS styles, so it's a challenge to pass on this information. We might be able to set the HTML 4 attribute, align="left" on the image tag when rendering on GitHub (though it's not exactly the same behavior).

See asciidoctor/asciidoctor#976 (comment)

[kovidgoyal]

I worked around it by passing in raw HTML, like this:

++++
<img align="left" role="left" src="logo/kitty.png?raw=true"/>
++++

which works fine with github's current stylesheet.

[mojavelinux]

Yep, that's effectively what we could do in the core converter when we detect we're running on GitHub.

[hohwille]

Any chance to get the feature working on github wikis?
It seems that github only supports a very initial basic set of asciidoc and while asciidoc and asciidoctor are evolving github is stuck and does not move on. Would it be possible to use some implementation like asciidoctor integrated in github and then being able to update once in a while?
3 years ago I opened #596 and nothing has changed since then.
Sorry to be frank but is github still an innovative platform?

[mojavelinux]

FYI, GitHub does use Asciidoctor. You can check the version it's running by including the following in your document:

{asciidoctor-version}

As of right now, it's Asciidoctor 1.5.6.1. See https://github.com/opendevise/asciidoc-samples/blob/master/runtime.adoc for more information.

The problem here isn't that GitHub has limited support for AsciiDoc (aside from missing support for the include directive). It's that GitHub doesn't provide the necessary supporting styles needed to interpret certain hints, such as float. AsciiDoc output can't actually float an image. It needs help from CSS to accomplish that. But it's not getting that help.

3 years ago I opened #596 and nothing has changed since then.

I think you filed it in the wrong repository. As I wrote in response to that issue, the problem is with Gollum, not github/markup (as far as I can tell).

[doublep]

I'm also affected by this issue:
https://github.com/doublep/eldev/blob/0.1.2/README.adoc#hooks

In my case it is a supposedly-right-floated shield image that is meant to show starting with which version certain feature is available. However, on GitHub the image is not correctly floated. I verified that outside GitHub it does work as intended using Asciidoctor.js Live Preview extension for my browser.

Also, GitHub adds a link to the image, even though there is none in the .adoc file. This is not so important.

The relevant code is:

:since-0-1-1: image:https://img.shields.io/badge/since-0.1.1-8be[Since 0.1.1,float=right]
...
{since-0-1-1} `eldev-build-system-hook`::
...

[janderssonse]

A couple of years later, still not working. Wakey, wakey, GitHub.

[zamazan4ik]

I've also met the issue. Will be awesome if will be fixed!

[RogueScholar]

I, too, have found myself among those who are unable to float when using Asciidoc in my repositories here, and I'm sure I need not explain how much of a hindrance it is to lack the ability to 🦆 when working with 🍑🗝️📜 in the ☁️ .

...I'll see myself out. 😊

[KingMob]

Running into this issue myself.