Wrapped text links do not highlight properly

[jonazen]

I ran into this today, and from my searches, it appears that this has been a problem with Xara web design tools going back to 2009 (first reference I saw, at least). Here's the issue:

I've created an FAQ page for a website that's in progress. Essentially, I've spelled out the questions on a single large text area ("text cursor"?) on a page. There's a carriage return between items, and the long ones wrap when they hit the width of the text block. I've increased the inter-line spacing, and it all looks great. I've set up a separate layer for items FAQ item that will pop up when the corresponding question link is clicked. Works great, looks great. Only problem is that when a question wraps to a second line (note: this is just a line wrap because the line is too long for the space available), when it's displayed in the browser, it acts as if there are two separate lines -- they highlight individually, even though they're really one continuous line, and should highlight as such.

Any thoughts on this? As I mentioned at the top, when I searched Google for this, one of the first hits I got was a 2009 post by a Xara user running into precisely this same issue.

Any suggestions or revelations would be most appreciated!

EDIT:

I just took a look at the page source that Xara WDP9 produced. Here's an example of a line that wound up wrapping because it's too long tor a single line:

<span class="xr_tl Normal_text" style="top: 76px;font-size:12px;color:#000000;"><a href="javascript:xr_cpu(6)" onclick="return(xr_nn());" onmousemove="xr_mo(this,24)" >I already have some life insurance and my spouse is constantly reminding me that I’m worth </a></span>
	<span class="xr_tl Normal_text" style="top: 91px;font-size:12px;color:#000000;"><a href="javascript:xr_cpu(6)" onclick="return(xr_nn());" onmousemove="xr_mo(this,24)" >more dead than I am alive.&nbsp; Is that really true?</a></span>

[steve.ledger]

Consequence of absolute positioning CSS, WYSIWYG'ness

To get around it [pun intended] you can add links using a character as a placeholder for the opening and closing anchor ref tag either side of the text string to be linked. You will also need to name the text area HTMLBlockText

See attached

[jonazen]

Consequence of absolute positioning CSS, WYSIWYG'ness

To get around it [pun intended] you can add links using a character as a placeholder for the opening and closing anchor ref tag either side of the text string to be linked. You will also need to name the text area HTMLBlockText

See attached

Thanks for the quick reply, and the solution!

Certainly workable. Will just be a bit tedious if I wind up with a lot of these. But this will let me keep chugging along without missing a beat. Thanks!

[Acorn]

sledger, what am I missing?

I opened your file and reverted the text area, keeping HTMLBlockText, and added a normal Xara link. I stretched the link over four lines.

I got the following:

<div class="xr_tb Normal_text" style="left:571px; top:133px; width:105px">
  <p class="xr_tu" style="font-size:16px;line-height:1.1em;">
   Dolor aliquip 
   magna aliqua, 
   irure ut, sed 
   aliquip. Lorem 
   non laboris 
   ullamco. Amet, 
   excepteur nisi 
   reprehenderit 
   voluptate 
   consequat 
   eiusmod 
   minim qui 
   incididunt et 
   in. Tempor, 
   quis fugiat est 
   ut duis. <a href="http://xara-users.com">This 
   is one link 
   wrapped in a 
   text area</a>
  </p>
 </div>

Doesn't this do the necessary, just adding HTMLBlockText?

Acorn

[steve.ledger]

I'm not sure what you did there or if you noticed the ► and ◄ placeholders, but it's certainly not a normal xara link as you say..
All xara htmlfilter links look something like this <a href="#" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" > - your's above does not.

[Acorn]

sledger, I worked it out that in deleting the arrows your code remained.
Proof that you have to build from scratch when testing and not modify back.

Acorn

[steve.ledger]

sledger, I worked it out that in deleting the arrows your code remained.

Acorn, if you remove those arrow text characters you will be removing the code because those arrows are placeholders for the code.

This little HTML placeholder trick was commonly used to add H1 tags to pages before Xara included them in version 8 and up.
It's also handy for other uses

[Acorn]

I have been experimenting with a jQuery solution for this.

It still requires HTMLBlockText applied but nothing else.

The Pin in this .web page does the magic: HREF on a Line.web

I have tested it for Anchors and external URLs with no problems, but you must test you own site thoroughly if using it as a solution.

Acorn

[steve.ledger]

Does not appear to work, Acorn.
For example - the top right text block (the one with the pin repelling text) shows this in the source code;

 <div class="xr_tb Normal_text" style="left:320px; top:24px; width:374px">
  <p class="xr_tu" style="line-height:1.1em;">
   Do quis reprehenderit irure dolor minim ipsum 
   proident, velit cillum aliqua incididunt. 
   Excepteur aliquip commodo <a href="http://www.bing.com" target="_self" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >aliqua labore </a>
   <a href="http://www.bing.com" target="_self" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >incididunt consectetur amet consectetur in </a>
   <a href="http://www.bing.com" target="_self" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >aliquip </a><a href="http://www.bing.com" target="_self" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >deserunt esse fugiat nostrud sint, qui cillum. </a>
   <a href="http://www.extra.com" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >Pariatur </a><a href="http://www.test.com" target="_parent" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >sed pariatur, velit nulla. Exercitation labore nisi </a>
   <a href="http://www.test.com" target="_parent" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >aliquip sed pariatur magna, lorem dolor</a>
  </p>
  <p class="xr_tu" style="line-height:1.1em;">
   &nbsp;
  </p>
 </div>

As you can see, the link to bing.com and test.com are split across multiple lines to create multiple links.

It's much simpler and cleaner to use the method I described earlier and needs no jquery code in the head.

[Acorn]

sledger, it gracefully defaults to normal Xara code if jQuery is not invoked. It needs an Internet connection to download jQuery.
Once this is in your local cache, a connection is not required.

I will look for other fail modes.

Acorn