Text wrapping issue

[jeebes]

Hi

Is there a way to stop Web Designer 17 and later versions, from exporting multi line text that is wrapped inside text box as individual lines wrapped in <span></span> tags?

For instance this:-


gets encoded as :

<div class="xr_txt Normal_text xr_s0" style="position: absolute; left:89px; top:125px; width:500px; height:10px;">
<span class="xr_tl Normal_text xr_s1" style="top: -41.6px;">Lorem Ipsum</span>
<span class="xr_tl Normal_text xr_s2" style="top: 42.67px;">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, </span>
<span class="xr_tl Normal_text xr_s2" style="top: 63.34px;">adipisci velit..."</span>
<span class="xr_tl Normal_text xr_s2" style="top: 104.68px;">"There is no one who loves pain itself, who seeks after it and wants to have it, simply </span>
<span class="xr_tl Normal_text xr_s2" style="top: 125.35px;">because it is pain..."</span>
<span class="xr_tl Normal_text xr_s2" style="top: 166.69px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sem sit amet libero </span>
<span class="xr_tl Normal_text xr_s2" style="top: 187.36px;">laoreet semper id vel erat. Sed sed euismod ex, at euismod sem. Nulla </span>
<span class="xr_tl Normal_text xr_s2" style="top: 208.03px;">condimentum vitae nisl sed interdum. Maecenas consectetur ex ipsum, et vulputate </span>
<span class="xr_tl Normal_text xr_s2" style="top: 228.69px;">felis vestibulum eget. Sed gravida bibendum vehicula. Praesent vulputate magna </span>
<span class="xr_tl Normal_text xr_s2" style="top: 249.36px;">suscipit, tristique turpis vel, vehicula odio. Fusce malesuada, lectus a posuere </span>
<span class="xr_tl Normal_text xr_s2" style="top: 270.03px;">viverra, erat tortor ultrices massa, porta feugiat nulla dolor quis magna. Nulla eget </span>
<span class="xr_tl Normal_text xr_s2" style="top: 290.7px;">nunc et nisi imperdiet tincidunt quis et eros. Cras quis urna vulputate libero dapibus </span>
<span class="xr_tl Normal_text xr_s2" style="top: 311.37px;">auctor. Pellentesque rutrum lorem ac laoreet semper. Aliquam nec accumsan lectus, </span>
<span class="xr_tl Normal_text xr_s2" style="top: 332.04px;">et finibus purus. Suspendisse lacinia ullamcorper elit, a congue augue aliquet ac. </span>
<span class="xr_tl Normal_text xr_s2" style="top: 352.71px;">Cras scelerisque cursus purus consequat volutpat. Vestibulum eu magna turpis. </span>
<span class="xr_tl Normal_text xr_s2" style="top: 373.38px;">Phasellus sed nibh dictum, efficitur tortor eu, bibendum nunc. In pharetra velit nec </span>
<span class="xr_tl Normal_text xr_s2" style="top: 394.05px;">venenatis vehicula.</span>
</div>

Am I missing something or is this by design?

Thanks in advance for your help.

[Acorn]

jeebes, this is by design as it allows pixel positioning and accurate gapping. It does back to the genesis of the applications (Xara Xtreme5 the <span>s were <div>s).

If you have a "simple" text area then use the Selector Tool and then Utilities > Names and Add htmlblocktext.

All the <span> Tags will become a collection of <p> Tags.

You will have to overcome issues around the line spacing as Xara got its sums wrong.
Repel text under won't play at all.

With a fair chug with CSS coding, you can overcome a lot of them.

Acorn

[wizard509]

Welcome to TG Jeebes.

[jeebes]

Hello Acorn, Wizard509

Thank you for the replies and welcome.

By design is what I suspected.

I have tried the HTML block text,it is Ok for short paragraphs, however for existing long instructional text with bullet points it is a pain to correct, though workable.

Many thanks again

Jeebes

[ss-kalm]

Possibly a stupid question, but if you're using a WYSIWYG web designer, WHY do you care what the code looks like. As long as it displays as you want it on the webpage, isn't that all that's required?

[Acorn]

Possibly a stupid question, but if you're using a WYSIWYG web designer, WHY do you care what the code looks like. As long as it displays as you want it on the webpage, isn't that all that's required?

Keith, I was going to ask the same.


Here's why I find it unexceptional.
The use of <span> is effective for left-justified text but fails miserably for centre and right justified.
The inclusion of bullets is also a mess.

Effectively each and every style change or decoration requires a different left position for a new <span>.

The worst example I have is when you use a "SmartField" block with a link; every character gains its own <span>. "Xara" would be rendered as:

<span class="xr_tl Normal_text xr_s0" style="top: 46.67px;">
<a href="javascript:%20:" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)">X</a>
<a href="javascript:%20:" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)">a</a>
<a href="javascript:%20:" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)">r</a>
<a href="javascript:%20:" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)">a</a>
</span>
Each letter gains its own individual hover.
Semantically correct but sure drags down your performance metrics.

Asked for a fix and ignored but probably as I sent a long email with a SmartField and a link; it probably hasn't arrived.

The other killer for me is Xara is incapable of rotating text with CSS's transform: rotate(angle) and instead converts text to an image.

Acorn