texts get blurry and pixelated on publish, when grouped - on websites

[define]

Hi everyone,

I just got a call from a customer, who claimed, that many texts on his
website are pixelated and blurred, when he zooms in whit 'ctrl+'.
I found out that he is right. And I also found out, that only text-blocks that
are grouped will behave like that.

I then checked every button on my page, as I usually group those als well
and bingo the same effekt occurs. The text element is blurred and seemingly
treated as a pixelated object (like shadows are).
Not a big deal, as long as noone zooms in into the page, but some people
have found out about it and use this feature to ease their sight.

If I break up the groups, the problem is solved, but I wonder, why this
is neccessary or meaningful?

Vector objects should always be treated as so.

Did anyone experience the same and can advice me on this.
Do I make any mistake in the first place, for example do I
have any option settings wrongly set up?

Appreciating any advice on this. Thx in advance

Klaus

[gwpriester]

Xara publishes bitmaps at 96dpi. This appears in web browsers at 1:1. If you zoom in on these images, the will appear to be blurry.

When you group any text, text area included, Xara exports the text as a bitmap. So as you have discovered, it is best not to group text.

Welcome to TalkGraphics Klaus

[define]

Xara publishes bitmaps at 96dpi. This appears in web browsers at 1:1. If you zoom in on these images, the will appear to be blurry.

When you group any text, text area included, Xara exports the text as a bitmap. So as you have discovered, it is best not to group text.

Welcome to TalkGraphics Klaus

Hi Garry,

and thanks a lot for taking care.

Does this also mean, that I can't group a navigation-button, (for example a simple rectangular shapes with text on top of it = one group)
as xara will give out a pixelated text on that button when publishing it? I can of course accept it, but I wonder, why this has to be handled this way.
The rectangular shape is a vector and the text is one as well. It might be another story, if the text-element would sit on top of an image.
But vectors on top of vectors should be handled as vectors or is this due to any computational challenges, that are to difficult to solve?
Grouping things is my favorite way of keeping everthing tidy :/ I like building nested groups, as it helps a lot to prevent unwanted
mistakes like unintentionally moving objects. I can of course 'lock' objects, but that's not my favorite, as it is not very obvious, which
objects are locked and which ones are not. That way you would always have to at first unlock everthing on the page to be able to work
with the formerly locked content. What about smoothed groups? Do they also produce this 'issue'? ... or lets put it that way, do you have
a workaround or tipp for me on this 'vector'-blurring hasle?

I'm using and loving xara since it was born and then was taken over by Corel.
I never felt this was an 'issue', but since quite some customers (not only the one, that eventually made me post this) over the
last month disliked the blurry text, as soon as they zoomed into the sites, I started wondering, what the reason might be for this vector-'behavior'.

Thanks again for your answer and for welcoming me on talkgrafics ... and for the many hints, tipps and tutorials that you provided over the years!!

Klaus

[gwpriester]

Navigation button shapes and text have to be grouped. And the blurriness is caused as you know by anti-aliasing. If you do not group the text with the button then the text shows in the default link color (blue) and is underlined.

Many sites use bitmap fonts to create sharper text. But bitmap fonts will also be blurry when magnified.

I'm not really sure what the answer is.

[Egg Bramhill]

One answer is don't group as Xara will create a bitmap on export. If you do then select it to export as a png.

Unfortunately you get no option if using a navbar, these are exported automatically as bitmaps.

If you want the button to stay vector, use a softgroup. This keeps them together but not grouped. Move the rectangle and the text moves with it.

One problem using this method is if the text has no link applied, only the rectangle below it has, is that the cursor changes from a link indicator to the text caret as it moves over the button.

You can avoid this by giving the text a link as well but turn off the underline option and give the three mouse states the same colour as the button text.

As a further snag, the button becomes messed up if the visitor uses 'Zoom Text Only'.

Large zoom on buttons created different ways:

[define]

Hi Egg, Hi Garry,

Thx in the first place for your hints.

I was playing around with the 'live-copy'-feature today and voila guess what - it does the trick!
If you build a button (filled rectangle shape with a text-element on top) and then turn it into a live-copy and link it to whatever,
it works like a charme. NO more blurry text, when zooming in.
As I said - I personally am quite happy with antialised text-elements, but many folks have these hires gadgets running now
and also like to zoom into sites as I said before.
So 'Live-copy-Buttons' and '-groups' are my solution for now.
BTW - Flash always used to work well with vectors shapes as well as bitmaps and texts on top.
Live-copies work with vector-text on top of images as well.
However once you 'unlink' the live-copy from its origin and fall back to a 'simple' group,
text gets blurry again on export.
I really wonder, if this could be a switch in future versions?

Best regards from Germany

Klaus

[gwpriester]

Klaus - This is great. Can you create a sample page and post it here so that members (and moderators) can see an example of how this works?

[digitalphaser]

Hi,
For a long time all modern browsers support SVG graphics. I do not think that many people still use IE8 & co. If so, they themselves are to blame.

Simple export a copy of the necessary vector graphics as SVG. Load it into site media folder. Then, change the file extension in the HTML source code. Done. Forget about the pixels.

SVG in use:

[Acorn]

Forgive me if I am wrong but Xara's NavBar approach needs the button graphic and text to be grouped, which forces a graphic on you.

All Klaus has done is discovered a button can be made of a soft-group graphic and text on both MouseOff and MouseOver layers, which, in turn are soft-grouped.
This will not allow a NavBar to be created.

Also the Live Copy is a "red herring" and can be dangerous if you expect a NavBar to act consistently across pages.

Acorn

[Egg Bramhill]

Also the Live Copy is a "red herring" and can be dangerous if you expect a NavBar to act consistently across pages.

Neither can I see any advantage in using live-copies, it still produces a bitmap png.

If you want real sharp images on browser zoom, the only way to do it in Xara is to NOT group the button & text elements, just soft group them and as I stated earlier remove underlining & use mouse colours to match the text. This exports the button as a vector and the button text is created via html/css.