Add left/right margin to floating images

[jxxcarlson]

The text around a floating image abuts directly to the text. This is ugly and makes the text harder to read. There should be a default right and bottom margin for images floated left --- image::images/foo.png[float=left] -- and a default left and bottom margin for images floated right. Also, it would be good to have a mechanism for easily managing margins, .e.g., --- mage::images/foo.png[float=left, margin=20]

This said, asciidoctor is AWESOME. I've been using it for 24 hours ---- converted a book project to it and will continue to use it despite a few rough edges, which I know will soon be gone. Good work guys!!

[mojavelinux]

Thanks for bringing the missing styles on floating images to my attention. You are correct, they are in need of some breathing room!

There are actually two types of image elements to style, inline and block. I've added styles for these in the default Asciidoctor stylesheet.

For the block image, I detect both the use of the float attribute (float="left" or float="right") or the position in the role (role="left" or role="right"). In both cases, I add a bit of margin above the image and ~10px margin between the image and text.

For the inline image, I detect the use of the position in the role (role="left" or role="right") and a bit of margin above and below the image and ~10px margin between the image and text.

I also included styles to emulate the look of a thumbnail (role="th" or role="thumb").

Here's an example of how to make an inline image that looks like a thumbnail float to the right of the text:

image:foo.png[role="related thumb right"] Here is the text....

(The related role isn't technically required, but recommended for semantic reasons).

Here's an example of how to make a block image that looks like a thumbnail float to the right of the next block (e.g., paragraph):

.An image title
image::foo.png[role="thumb right"]

Text in next paragraph.

float="right", role="thumb" would also work in the previous example.

While tempting, we shouldn't introduce the margin attribute because it mixes (very specific) presentation information with content, something which AsciiDoc works hard to keep separated. The proper way to style an element is to assign it a role (or an extra role), then provide a stylesheet that contains styles for that role.*

If you need to customize the look, you should provide your own stylesheet additions (either by using your own stylesheet that builds on the default stylesheet or adding them in a docinfo file).

* The float attribute walks a fine line here.

[mojavelinux]

Thanks for your kind words about Asciidoctor. It's feedback like that that fuels our passion to make writing a pleasure.

[mojavelinux]

I'm very curious to here more about the rough edges. We always strive to improve!

[jxxcarlson]

Thanks for the amazingly quick response!

I'm something of a noob at ruby/github so pardon the question ---
is there a way to update asciidoctor at this time to take advantage
of the changes? (Maybe too early?)

I tried

$ gem update asciidoctor

Best regards,
Jim

jxxcarlson@icloud.com
http://square-the-circle.com

On Jun 28, 2013, at 8:02 PM, Dan Allen notifications@github.com wrote:

Thanks for bringing the missing styles on floating images to my attention. You are correct, they are in need of some breathing room!

There are actually two types of image elements to style, inline and block. I've added styles for these in the default Asciidoctor stylesheet.

For the block image, I detect both the use of the float attribute (float="left" or float="right") or the position in the role (role="left" or role="right"). In both cases, I add a bit of margin above the image and ~10px margin between the image and text.

For the inline image, I detect the use of the position in the role (role="left" or role="right") and a bit of margin above and below the image and ~10px margin between the image and text.

I also included styles to emulate the look of a thumbnail (role="th" or role="thumb").

Here's an example of how to make an inline image that looks like a thumbnail float to the right of the text:

image:foo.png[role="related thumb right"] Here is the text....
(The related role isn't technically required, but recommended for semantic reasons).

Here's an example of how to make a block image that looks like a thumbnail float to the right of the next block (e.g., paragraph):

.An image title
image::foo.png[role="thumb right"]

Text in next paragraph.
float="right", role="thumb" would also work in the previous example.

While tempting, we shouldn't introduce the margin attribute because it mixes (very specific) presentation information with content, something which AsciiDoc works hard to keep separated. The proper way to style an element is to assign it a role (or an extra role), then provide a stylesheet that contains styles for that role.*

If you need to customize the look, you should provide your own stylesheet additions (either by using your own stylesheet that builds on the default stylesheet or adding them in a docinfo file).

• The float attribute walks a fine line here.

—
Reply to this email directly or view it on GitHub.

[mojavelinux]

Certainly!

I've been thinking about publishing pre-release versions so that gem install asciidoctor --pre will work. Until then, here's how you can get your own pre-release version.

git clone https://github.com/asciidoctor/asciidoctor.git
cd asciidoctor
gem build asciidoctor.gemspec
gem install asciidoctor*.gem
asciidoctor -V

[mojavelinux]

I went ahead and published a preview release (0.4.1.preview.1). You can now install it using:

gem install asciidoctor --pre

[jxxcarlson]

Thankyou for making prerelease available! I can confirm:

bash-3.2$ asciidoctor -V
Asciidoctor 0.1.4.preview.1 [http://asciidoctor.org]

I use

bash-3.2$ asciidoctor p.txt

My html output doesn't show a margin around the floated images,
which I do with

image::images/02loop.png[width=150, float=left]

I will study further. Maybe I should use [role=somehthing]

Jim

jxxcarlson@gmail.com
http://square-the-circle.com

On Jun 29, 2013, at 3:51 PM, Dan Allen notifications@github.com wrote:

I went ahead and published a preview release (0.4.1.preview.1). You can now install it using:

gem install asciidoctor --pre
—
Reply to this email directly or view it on GitHub.

[mojavelinux]

Excellent!

Yes, using role would be more semantic (though both work).

image::images/02loop.png[width=150, role=left]