Better (sub) pixel control in Web-Documents please!

[hoja]

I would like to have true pixel snapping in Web documents and an option to see the pixel grid (when zoomed into
objects closely) as offered in programs such as Adobe Illustrator and Affinity Designer.



The latter further has the cool feature to live-edit the rasterized representation of vector elements
which need to get turned to bitmaps for browser display – that can go as far as to brush-edit antialiasing.

Xara thus far tries to deal with these details silently in the background – users don't even get encouraged to
design pixel accurately! But one can very easily reach the borders of the presently used system as seen in the
attached simple animation. A white rectangle(according to Xara sitting perfectly on even pixels), has an exact
duplicate on the mouseover layer. The mouseover layer is set to show instantly – but still – watch the offset.
I run into this kind of misalignment issues all the time and would really like getting rid of them.



A closely related issue is line width. From other applications I'm used to set the alignment of lines:
Do they appear outside of the object, centered on their margin or towards the inner of the object, so that
the overall size doesn't grow?

Inside Xara one can only draw a rectangle and give it a stroke. Whatever width the stroke has, it is aligned
centrally – and even a lot worse – stroke width doesn't affect the displayed object size, as seen in the next
animated gif. Obviously this is the cause for a lot of misalignement issues.



You will need to click the images to play the gifs.

PS: One can get rid of that Mouseover misalignment btw, when manually subtracting half of the line width from
the displayed overall object size (in that case half a pixel) but there should be better ways to get that result.

[gwpriester]

Not sure if any of this is helpful.

You can draw a rectangle to the maximum size, then apply an Inner Contour to the line width. Or draw a rectangle to size, convert the line to shape and then resize to the precise dimensions.

To the left of the two dialog boxes you show is an X and Y coordinates box which can be used to place the object at an even pixel location.

[hoja]

Hi Gary,

To the left of the two dialog boxes you show is an X and Y coordinates box which can be used to place the object at an even pixel location.

If the dimension boxes are wrong, the coordinates box you mention is rendered meaningless.

The problem with these dimension boxes are cases which cause them to show anything but the exact object dimensions.
In my second gif I give the box a stroke of 96px, the box as a matter of fact gets greatly larger but the dimension boxes stubbornly
show the original size. The same thing btw. happens with rectangles which got converted to shapes.

There's other cases which at export time require slight changes in object dimensions due to antialiasing.
Other apps give you control about even these aspects, already while setting up the Design.

I did not try the contour suggestion as it seems a too convoluted workaround for something which should just work.

[gwpriester]

I did not try the contour suggestion as it seems a too convoluted workaround for something which should just work.

I agree. The option to have an outline export to the exact dimensions is the right way to do this. I was merely suggesting ways I work around such issues.

[PhilM]

Use the "Scale line widths" button to include/exclude line widths from dimensions and snapping.

Phil

[hoja]

Thanks Phil,

Use the "Scale line widths" button to include/exclude line widths from dimensions and snapping.

Phil

I see that this option indeed triggers the transform boxes to update, it's no practical solution though.

Binding outline scale to object scale probably makes a lot of sense when creating vector drawings.
I can't see a practical value in Webdesign, here one wants outlines to keep their scale (even pixels)
and wants them to sit pixel perfect too.

Say you have a grid of rectangles (images) at various sizes on a page which all have an outline. Each
time one resizes elements one will end up with a new uneven value for the line width, which consequently
will let the line appear needlessly blurred when rasterized. Having page elements with margins at various
widths would look quite ugly too.

In case however these arbitrary margin rectangles are re-created as css at web-export and automatically
get full pixel values re-assigned for width and screen coordinates the Designer has not enough control about
the end-result. I show such an undesired deviation in my first animated gif.

[Egg Bramhill]

Each time one resizes elements one will end up with a new uneven value for the line width, which consequently
will let the line appear needlessly blurred when rasterized.

Resize elements with the Scale Line Widths OFF. Therefore a 100px x 100px square with a 6px outline doubled in width/height by 200% becomes a 200px x 200px square with a 6px outline. It's not hard to grasp.

[Egg Bramhill]

But one can very easily reach the borders of the presently used system as seen in the
attached simple animation. A white rectangle(according to Xara sitting perfectly on even pixels), has an exact
duplicate on the mouseover layer. The mouseover layer is set to show instantly – but still – watch the offset.
I run into this kind of misalignment issues all the time and would really like getting rid of them.

Perhaps you could supply a xar file showing this misalignment?

[hoja]

Hey Egg,
this is the wishlist section. If you are ok with wrong dimension and transform values
as the consequence of having a stroke assigned to objects, that's of course fine.

Not even being able to enforce perfect pixel alignment with guides and grids and having
to calculate actual dimensions and real positions is something I personally don't think is
any good. Hence my wish :o)

Attached is the xar I used. I duplicated to Mouseover via clipboard and Paste in place in current Layer.

[PhilM]

With "scale line widths" enabled use the edge handles of the Selector tool (not the corner handles) to resize your rectangle. Line width will then not be affected.

I suspect you would find it much easier if the outline stroke were always inside the shape but it is currently centered on the outline of the shape. Thus a 1px line falls 0.5px outside the shape's outline.

A longstanding request from users is to be able to control the stroke position relative to a shape's outline.

Phil