Asciidoctor-pdf: Images cannot float

Created on 6 Nov 2015  路  16Comments  路  Source: asciidoctor/asciidoctor-pdf

Hello.
We can have floating image in the HTML5 backend using this syntax:

image::image.jpg[role="right"]

but it does not work in the PDF backend.

Thanks to fix this issue.

Most helpful comment

At this point, I seriously doubt Asciidoctor PDF will ever support floating. It's not just a matter of time. This technology stack (specifically Prawn) just doesn't provide the tools we need to do it without an enormous amount of logic.

We're going to be pivoting our PDF strategy to leverage web technologies (HTML and CSS). Once we do that, we'll be able to use all kinds of advanced layouts, including floating. I'll be posting about this new strategy on the list later this week.

All 16 comments

Floating images in PDF is extremely difficult, which is why we haven't done it yet. I do have a prototype of some text around images that can be found in editions (https://github.com/opendevise/editions/blob/master/lib/editions/pdf_extensions.rb#L88-L139). We're still considering how to integrate that into Asciidoctor PDF.

As an alternative, I tried using a table, but there is a lot of empty space at the bottom of the table.

Here is my code:

[cols="2*"]
|===
|Some +
text

|image:image.jpg[]
|===

Is it normal that there is a big white space at the bottom of the table?

It seems to happen only when using an image inside a table.

Thanks for your help.

It seems to happen only when using an image inside a table.

That definitely sounds like a bug. Images can throw off the cursor if not handled correctly, which could be happening in this case. I'll definitely look into it.

I think the problem is that inline images aren't properly expanding the cell height, which is the reason for #295 as well.

@mojavelinux Is there any possibility I can try your pdf extension with ascidoctor pdf, as our documentation departement would like to have floating images in pdf too.

@atomfrede Yes, by all means.

@atomfrede did you figure out how to try @mojavelinux PDF extension with Asciidoctor PDF? I'd also like to get floating images working

@cocowalla No I didn't had time. We made some changes to the documents, such that floating images are not required anymore at the moment.

In the case "image in a table cell" i have the following effect with images wider than the cell:

  1. Images with a small height are show twice
  2. Higher images are shown once with a lot of white space below the image (White space has the same height like the image)
    Looks a bit like a duplication bug.

As I've said many times before, what needs to be done to get AsciiDoc table cell content to work is to write a custom table cell implementation for Prawn that recurses back into the converter to handle arbitrary AsciiDoc content. Once that is done, in theory, we get support for all block-level AsciiDoc in a table cell for "free". Until then, trying to render AsciiDoc content in a table cell by cherry picking it is just a huge hack.

So, what about a proper float implementation into PDF? Is it still in the pipe?

Any updates on this issue?

+1

At this point, I seriously doubt Asciidoctor PDF will ever support floating. It's not just a matter of time. This technology stack (specifically Prawn) just doesn't provide the tools we need to do it without an enormous amount of logic.

We're going to be pivoting our PDF strategy to leverage web technologies (HTML and CSS). Once we do that, we'll be able to use all kinds of advanced layouts, including floating. I'll be posting about this new strategy on the list later this week.

I'll be posting about this new strategy on the list later this week.

Has this ever been done? A search did not reveal anything really relevant.

I've been waiting on the 1.5.0 release to push out the official announcement. I have been talking about it rather extensively in the gitter channel, though. The prototype can be found at https://github.com/mogztter/asciidoctor-pdf.js, but it's still early days.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mimiz picture mimiz  路  3Comments

orloffm picture orloffm  路  6Comments

elburro1887 picture elburro1887  路  4Comments

lurch picture lurch  路  7Comments

aidanhs picture aidanhs  路  3Comments