[SOLVED] Text to the right of an embedded image in AsciiDoc

Text to the right of an embedded image in AsciiDoc

In my asciidoc document I've an embedded image like this:

[[login-page]]
[salt, id="login-page", format="svg", align="left"]
----
{
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
----
.Login Page
{empty}+

I'd like to have the text that describes the image on the right... and I've already tried with a table. Problem is that putting the code above inside a table cell, the image doesn't get rendered; instead, the table cell just shows the code as-is.

Is there any way to have the text on the right of the generated image? I'm using asciidoctor for HTML and asciidoctor-pdf for PDF.

UPDATE Here's is how I tried with a table:

[cols="1,1", frame=none, grid=none]
|===
a|[salt, id="login-page", format="svg", align="left"]
----
{
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
----

|This diagram illustrates the design of the login page, which...
|===

The snipped about crashes:

asciidoctor: WARNING: user-interface.adoc: line 20: unterminated salt block
java.lang.IndexOutOfBoundsException: Index 2 out of bounds for length 2

If I replace ---- with @startsalt and @endslat it doesn't crash but it just renders the salt code as-is.

Solution

The problem is that the Salt syntax uses pipe symbols, and AsciiDoc tables use pipe symbols to introduce new cells.

Try defining a custom cell separator:

[cols="a,a", frame=none, grid=none, separator="!"]
!===
!
[salt, id="login-page", format="svg", align="left"]
----
{
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
----

!This diagram illustrates the design of the login page, which...
!===

Note: you must avoid using the cell separator in the cell content.