HTMLBlockText and line spacing

[Big Frank]

Has anybody found a way to maintain the visible line spacing so that text displayed using HTMLBlockText corresponds in a browser to what is displayed in Xara? I have to use HTMLBlockText (it solves another problem I had) but can't find the way to place images in that text without them overlaying the text. My text is fully justified 10pt Tahoma with line spacing at 150%. I tried changing font units from PT to PX and back again, but that wasn't the answer. Unfortunately Xara doesn't seem to support EMs and when using HTMLBlockText you can use neither Anchor to Text nor Repel Text (well, you can, but it isn't exported, for obvious reasons).

Any help would be gratefully appreciated.

[Acorn]

These are all workarounds.

Select the text block and add a Name.
In the page placeholder head, add CSS for the named ID to change line spacing and set EM font sizes.

The only way you can "wrap" text is to create a set of linked shaped text blocks.

Acorn

[jonazen]

Has anybody found a way to maintain the visible line spacing so that text displayed using HTMLBlockText corresponds in a browser to what is displayed in Xara? I have to use HTMLBlockText (it solves another problem I had) but can't find the way to place images in that text without them overlaying the text. My text is fully justified 10pt Tahoma with line spacing at 150%. I tried changing font units from PT to PX and back again, but that wasn't the answer. Unfortunately Xara doesn't seem to support EMs and when using HTMLBlockText you can use neither Anchor to Text nor Repel Text (well, you can, but it isn't exported, for obvious reasons).

Any help would be gratefully appreciated.

Frank - on the site I just finished, the FAQ page has about 20 (or more) paragraphs, each of which represented an FAQ question. I made use of Acorn's jquery (thanks SO much) to properly highlight entire paragraphs. When an FAQ item is clicked, it displays a hidden layer with the FAQ answer. I'm using Google Fonts and various formatting in the answers, and in one I have an image immediately below the text: I found that leaving the text as text would result in weird results, inconsistent across browsers. I wound up having to tweak "normalize.css" that one of the tools I used added to the overall project -- but in the end, what really helped was wrapping the text block in a group. On export, Xara exported an image of the properly formatted text (and image). I was worried that this would comprise SEO considerations, but I was delighted to learn that when DPX9 converts a group to an image, any included text is exposed as "alt text" -- so NOTHING is lost in the process.

Anyway -- take a look at the site:
Overall site is at: http://www.humanlifevalue.com

The FAQ page in particular is: http://www.humanlifevalue.com/faq.htm

Try clicking on any question -- you'll see the pop up is an image, so it's appearance is exactly what I saw while in DPX9. Could that work for your case, using "repel"? If DPX9 exported an image, I'd think this would be exactly what you need...?

EDIT: trying clicking the sixth FAQ question -- this has the text, an added (though not inline) image, and mouse over to display a larger image)

[Acorn]

Jon, the downside to your solution is it delivers a graphic that could be quite large and the text can't be copied and pasted.
In some circumstances this may be what is needed.

Would a soft group not achieve the same effect and keep the text as text?

Acorn

[jonazen]

Jon, the downside to your solution is it delivers a graphic that could be quite large and the text can't be copied and pasted.
In some circumstances this may be what is needed.

Would a soft group not achieve the same effect and keep the text as text?

Acorn

Yes -- the size was a concern to me, and I hesitated until we had done some serious testing on the page to make sure it was overly heavy or slow.

Re: copy / paste -- also understood, and I, for one, DO like to copy text out of pages I find. Grouping and exporting as an image would certainly prevent that. My client, in this case, actually liked the fact that others wouldn't be able to glom their content quite as easily. It's there, but it would be a bit labor intensive for arbitrary plagiarism. You're absolutely right though. There will be times when this is a detriment.

Re: soft group -- I did try this first, and this is when I ran into the "joys" of inconsistent rendering across browsers. Even with high quality fonts (I tried many), and even with normalize.css (even manually tweaked), I found that this small blocks of text with narrow borders would render slightly differently in Chrome, Firefox and IE, making it hard to control the actual final appearance across the board. Worse -- for some reason, when I was asked to into some of the text blocks and italicize various words, a couple of the words actually disappeared on export to html! I messed with this quite a bit, and could not see any rhyme or reason to this. Some of the italicized words worked just fine. A couple simply disappeared on web site export. I wondered if the nifty jquery that wrapped links on the main layer was somehow causing this, but that made no sense at all. I suppose I (maybe with help here?) could have eventually found the problem and fixed it. But I found that grouping these, and letting DPX9 export them as images with alt text, eliminated browser rendering inconsistency and let me side-step the disappearing italic word issue. The image sizes were small enough so it wasn't an issue. Hence my final choice.

It could be an appropriate technique for some -- but as you note, not necessarily for all users and use cases.

[Big Frank]

Thanks for your answers guys.

There are a million good reasons for not turning text into an image but I can't think of many good reasons for doing so. In this case we are talking about a full page of text so clearly turning it into an image is a non-starter. I think I'll look at the CSS EM solution, thanks for that suggestion, Acorn.

Jon, I did look at your page and the thing that struck me most about it wasn't your use of image-as-text (although I instinctively don't like it) but in fact the use of red as your choice of colour for the highlights on the page. Red is the colour of danger, heat, raised emotion, and love and sex, of course. What it isn't is the colour of credibility, reliability and/or trust. Your subject matter is death, which might suggest that red is the right colour for the highlights, but I'd say that the emotion you want to generate in your visitors isn't that which red portrays. I would personally get the red out of there, especially the red drop shadow, which really does make one think of splattered blood!