Text & Image Groups

Prompted by a desire to see text-as-text when grouped (in another TG thread), I have used two suggestions: (1) naming the enclosed text "HTMLText" and (2) using only Soft Groups, versus soft grouping groups on the MouseOver & MouseOff layers.

It could be my mistake, but it appears if a link is set to index there are some bizarre effects which I cannot get to grips with. Below are three images, MouseOver layer, MouseOff layer and a Preview. If a button link is set to index, it appears to shift right when I have used either the HTML name, only soft groups or set a rectangle with an outline. My first thought was I had not correctly aligned both layers, but toggling between the two seems to show them aligned. The issue does not appear to occur if I set a link other than index, with the exception that if a button has text named HTMLText, occasionally the mouseover shows the mouseover layer shifted to the right.

Text in all cases was centred.

Attachment 126274 Attachment 126275 Attachment 126276

I have attached the XAR doc for reference.

Any thoughts on what I have done incorrectly much appreciated.

You've done nothing wrong. Using Page: index causes a FAIL.

I have had these issues for a long time and I think I Dear Xara'd such well over two years ago.

If you use Centre or Fully Justify, you get the jump.
I can then get fails for # links but all links too as it is dependent on the direction and speed of entering the live button areas.

I have tried Text Lines, Columns and Areas along with NAM(E)ing them HTMLText and HTMLBlockText.
I gave up after HTMLBlockText (this changes the text to a block of text rather than a nest of SPANs).
Where things go wronger is the second you stretch a the text, even by accident, you are lemoned with a transform scale styling that also includes transform-origin; I think this also causes the sideways lurch.

It is not our job to fudge around Xara's mistakes when it just layers and layers defect upon defect.
This is why I build buttons in CSS. Start off with something like https://www.bestcssbuttongenerator.com/.

It is refreshing to see someone with a structured approach.

Acorn

I group the text with the button and then soft group the two buttons on both layers. There is a relatively new setting in Image Separate Images for Group Members.

I do not get any shift on the index button.

Quote:

---

Originally Posted by gwpriester

I group the text with the button and then soft group the two buttons on both layers. There is a relatively new setting in Image Separate Images for Group Members.
I do not get any shift on the index button.

---

Agreed, but you get 18 bitmaps where the text is blocky at scale. This happened here as you chose to make the buttons into a NavBar, which fails for the separated group images.

We are striving for crisper vector outputs.

Acorn

Thank you Acorn and Gary.

I did try separate images within the group and saw no difference in clarity between that and a single group image when using Xara's standard NavBar. I think when you significantly magnify this in a browser you can see the text still converts to an image. When it does, the text becomes slightly fuzzy. I still find if I create a button on its own (with separate images, text and graphic) and link it to index the button distorts. It seems a quirk of Xara's NavBar that it rectifies the distortion issue when its uses the distorted button. It's irritating the issue exists, but most website visitors would not notice it. I will have a go at Acorn's CSS idea.

Attachment 126282

Thank you for the ideas and thoughts.

The idea behind the Separate Images in a Group was that the text would remain editable text. Though looking at the index.html file it shows the text as a bitmap. Never mind.

Gary, as a small consolation, here is a CSS gary-style CSS Button Bar, just for you.

No images were harmed in the making of this bar.

:pointAttachment 126283

Acorn

P.S. I deleted you original image as it add 6.3MB to the file size.