images in table

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

images in table

moovida
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.


Reply | Threaded
Open this post in threaded view
|

Re: images in table

mojavelinux
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:


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



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|

Re: images in table

moovida
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