Topics

Image placement: inline or break (with align= "center") #CSS #images

Matt Lorenzi
 

So this may seem like a simple question for DITA users, but here I am again since I am moving FrameMaker DITA content over to OxygenXML Author.

Images in FrameMaker where held in a "anchored frame" and center aligned. FrameMaker did the aligning not through the dita element attribute, but through its own template structure thing (don't ask).

Over in OxygenXML Author, all my images are placed "inline" and are left aligned - this to my knowledge is the default setting (at least within Oxygen).

In order to have them center aligned, I would need to change the placement attribute to "break" and the align attribute to "center". OR, could I leave as is and simply add a CSS rule to have the images center align? Which is more correct? For the most part I want my images to sit on their own line and not run in-line with text, but occasionally I will want an icon or similar to run inline with the text.

As always, looking for the best practice. Thanks!

Mica Semrick
 

I wouldn't change the semantic meaning of any of the attributes, unless some style guide you follow has rules about the formatting. If the style guide calls for all images to be centered, then a CSS rule would work best, ignoring the attribute value.

Kristen James Eberlein
 

Hi, Matt.

Here is my pure, "best practices" answer:

Programmatically add placement="break" and whatever value of @alignment you want. The DITA grammar files set the value of placement to "inline," so you need to override that value whenever you want the images to "break." The DITA grammar files do not specify a value for @align, since that attribute is only available when placement="break".

This approach gives you correct DITA source, and your writers will learn to use <image> as the spec intended. If you change authoring environments or want to use an new transformation format, you'll have the better chances of getting the experience that you want.

My pragmatic, "time is short" answer:

Add rules in your stylesheets to force the images to break. But remember you'll then need to add markup to indicate those few images that you want inline, as well as style rules to handle those cases.

Note that I changed the hashtags for your subject line, to better reflect the content. I did not know whether you are generating HTML or PDF.

Best,
Kris

Kristen James Eberlein
Chair, OASIS DITA Technical Committee
Principal consultant, Eberlein Consulting
www.eberleinconsulting.com
+1 919 622-1501; kriseberlein (skype)

On 1/20/2020 5:09 PM, Matt Lorenzi via Groups.Io wrote:
So this may seem like a simple question for DITA users, but here I am again since I am moving FrameMaker DITA content over to OxygenXML Author.

Images in FrameMaker where held in a "anchored frame" and center aligned. FrameMaker did the aligning not through the dita element attribute, but through its own template structure thing (don't ask).

Over in OxygenXML Author, all my images are placed "inline" and are left aligned - this to my knowledge is the default setting (at least within Oxygen).

In order to have them center aligned, I would need to change the placement attribute to "break" and the align attribute to "center". OR, could I leave as is and simply add a CSS rule to have the images center align? Which is more correct? For the most part I want my images to sit on their own line and not run in-line with text, but occasionally I will want an icon or similar to run inline with the text.

As always, looking for the best practice. Thanks!

David H
 

Hi Kris,

What would placement="break" do in an HTML context? Can web pages 'break'? Errr, that's a genuine question because it's not something I've heard of.

My simplistic assumption would be that page breaks would normally refer to PDF. But I might be wrong.

Many thanks,
David

Hi, Matt.

Here is my pure, "best practices" answer:

Programmatically add placement="break" and whatever value of @alignment you want. The DITA grammar files set the value of placement to "inline," so you need to override that value whenever you want the images to "break." The DITA grammar files do not specify a value for @align, since that attribute is only available when placement="break".

This approach gives you correct DITA source, and your writers will learn to use <image> as the spec intended. If you change authoring environments or want to use an new transformation format, you'll have the better chances of getting the experience that you want.

My pragmatic, "time is short" answer:

Add rules in your stylesheets to force the images to break. But remember you'll then need to add markup to indicate those few images that you want inline, as well as style rules to handle those cases.

Note that I changed the hashtags for your subject line, to better reflect the content. I did not know whether you are generating HTML or PDF.

Best,
Kris

Kristen James Eberlein
Chair, OASIS DITA Technical Committee
Principal consultant, Eberlein Consulting
www.eberleinconsulting.com
+1 919 622-1501; kriseberlein (skype)

On 1/20/2020 5:09 PM, Matt Lorenzi via Groups.Io wrote:
So this may seem like a simple question for DITA users, but here I am again since I am moving FrameMaker DITA content over to OxygenXML Author.

Images in FrameMaker where held in a "anchored frame" and center aligned. FrameMaker did the aligning not through the dita element attribute, but through its own template structure thing (don't ask).

Over in OxygenXML Author, all my images are placed "inline" and are left aligned - this to my knowledge is the default setting (at least within Oxygen).

In order to have them center aligned, I would need to change the placement attribute to "break" and the align attribute to "center". OR, could I leave as is and simply add a CSS rule to have the images center align? Which is more correct? For the most part I want my images to sit on their own line and not run in-line with text, but occasionally I will want an icon or similar to run inline with the text.

As always, looking for the best practice. Thanks!

Kristen James Eberlein
 

The DITA spec sets the @placement attribute to "inline" by default. That means that images are rendered inline, for usage such as "To configure the widget, click [image]."

If you want images in your output to be rendered on the following line, for usage such as "The following image illustrates ...," then you need to set placement="break."

So, we are not taking about page breaks here, but whether images are rendered inline (on the same line) as surrounding text, or on the following line.

Best,
Kris

Kristen James Eberlein
Chair, OASIS DITA Technical Committee
Principal consultant, Eberlein Consulting
www.eberleinconsulting.com
+1 919 622-1501; kriseberlein (skype)

On 1/21/2020 7:15 AM, David H wrote:
Hi Kris,

What would placement="break" do in an HTML context? Can web pages 'break'? Errr, that's a genuine question because it's not something I've heard of.

My simplistic assumption would be that page breaks would normally refer to PDF. But I might be wrong.

Many thanks,
David

Hi, Matt.

Here is my pure, "best practices" answer:

Programmatically add placement="break" and whatever value of @alignment you want. The DITA grammar files set the value of placement to "inline," so you need to override that value whenever you want the images to "break." The DITA grammar files do not specify a value for @align, since that attribute is only available when placement="break".

This approach gives you correct DITA source, and your writers will learn to use <image> as the spec intended. If you change authoring environments or want to use an new transformation format, you'll have the better chances of getting the experience that you want.

My pragmatic, "time is short" answer:

Add rules in your stylesheets to force the images to break. But remember you'll then need to add markup to indicate those few images that you want inline, as well as style rules to handle those cases.

Note that I changed the hashtags for your subject line, to better reflect the content. I did not know whether you are generating HTML or PDF.

Best,
Kris

Kristen James Eberlein
Chair, OASIS DITA Technical Committee
Principal consultant, Eberlein Consulting
www.eberleinconsulting.com
+1 919 622-1501; kriseberlein (skype)

On 1/20/2020 5:09 PM, Matt Lorenzi via Groups.Io wrote:
So this may seem like a simple question for DITA users, but here I am again since I am moving FrameMaker DITA content over to OxygenXML Author.

Images in FrameMaker where held in a "anchored frame" and center aligned. FrameMaker did the aligning not through the dita element attribute, but through its own template structure thing (don't ask).

Over in OxygenXML Author, all my images are placed "inline" and are left aligned - this to my knowledge is the default setting (at least within Oxygen).

In order to have them center aligned, I would need to change the placement attribute to "break" and the align attribute to "center". OR, could I leave as is and simply add a CSS rule to have the images center align? Which is more correct? For the most part I want my images to sit on their own line and not run in-line with text, but occasionally I will want an icon or similar to run inline with the text.

As always, looking for the best practice. Thanks!

Chris Papademetrious
 

I was planning to reply to this discussion when Kris wrote exactly what I intended to write.

Correct DITA source is best, but do what you gotta do.

 - Chris

Julio J Vazquez
 

One more thing. As a best practice, unless the image is supposed to be inline, make sure it is not inside a paragraph of the preceding text. 

Julio J. Vazquez

Matt Lorenzi
 

With regards to images and page breaks, obviously I want my figure title to always sit on to of the image, and never break (image title on one page, image on another). Again, easy enough with attribute outputclass="page-break-avoid", but would have to make sure I assign this to all images? If I wanted to to this globally for all images, would I be best to use CSS?

Chris Papademetrious
 

Hi Matt,

For keeping titles with their content, I prefer to enforce this with CSS because it's something you want to be a fixed characteristic of the output, not configurable by the user.

 - Chris