Asciidoctor :: Discussion

images in table

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

3 messages Options

moovida

Jul 14, 2018; 9:09am

images in table

I have a small problem with a text on the side of an image, which I am trying to achieve through a table. I have browsed the forum, but all teh image in table threads didn't seem to address this.

I am using:

```asciidoc

[cols="<.<,<.<"]
|===

a|
1. connect your Android device to internet
2. open Play Store
3. type geopaparazzi within the Search textbox
a| image:images/01_install.png[width=70%]

|===

```

I would expect a bullet list on the left and an image on the right.

Which is indeed what happens, but the bullet list is aligned at the center of the image. I have tried almost everything with the alignments settings but have not been able to get out of this.

Can anyone tell me what I am doing wrong?
Thanks,
Andrea

PS: I am using this to create slideswith the revealjs module. Not sure if that matters.

mojavelinux

Jul 14, 2018; 10:35am

Re: images in table

Administrator

Andrea,

This is most likely a stylesheet issue. The styles that the reveal.js theme provides is likely overriding default / built-in behavior in AsciiDoc output. And reveal.js likes to center everything by default, so that's where I would look.

There's a setting to disable vertical centering:

https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/templates/document.html.slim#L129

I'm not sure about horizontal centering.

If you continue to have difficulty, I would file a feature request at https://github.com/asciidoctor/asciidoctor-reveal.js for a control to disable the default horizontal centering.

Cheers,

-Dan

On Sat, Jul 14, 2018 at 3:09 AM, moovida [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I have a small problem with a text on the side of an image, which I am trying to achieve through a table. I have browsed the forum, but all teh image in table threads didn't seem to address this.

I am using:

```asciidoc

[cols="<.<,<.<"]
|===

a|
1. connect your Android device to internet
2. open Play Store
3. type geopaparazzi within the Search textbox
a| image:images/01_install.png[width=70%]

|===

```

I would expect a bullet list on the left and an image on the right.

Which is indeed what happens, but the bullet list is aligned at the center of the image. I have tried almost everything with the alignments settings but have not been able to get out of this.

Can anyone tell me what I am doing wrong?
Thanks,
Andrea

PS: I am using this to create slideswith the revealjs module. Not sure if that matters.

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/images-in-table-tp6420.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux

moovida

Jul 14, 2018; 1:26pm

Re: images in table

Thanks for the reply Dan,

mojavelinux wrote

[...]
There's a setting to disable vertical centering:

https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/templates/document.html.slim#L129

I'm not sure about horizontal centering.

I tried to change this, but it doesn't affect it.

Horizontal centering is not the problem. It is really vertical. The text always starts at the bottom of the image. To make this look decent, I have to do this trick to "push" it up:

[cols="<.<,<.<,<.<"]
|===

a| 
image::images/08_project_info.png[]

2+a|
1. remove/add new data
2. edit and save the project's metadata
{empty} +
{empty} +
{empty} +
{empty} +
{empty} +
{empty} +

|===

mojavelinux wrote

If you continue to have difficulty, I would file a feature request at
https://github.com/asciidoctor/asciidoctor-reveal.js for a control to
disable the default horizontal centering.

I opened an issue, thanks.

Cheers,
Andrea