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

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.

Attachment 114654

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.

Attachment 114652

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.

Attachment 114653

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.

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.

Hi Gary,

Quote:

---

Originally Posted by gwpriester

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.

Quote:

---

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.

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

Phil

Thanks Phil,

Quote:

---

Originally Posted by PhilM

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.

Quote:

---

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.

Quote:

---

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?

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.

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

Quote:

---

Originally Posted by 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.Phil

---

That's actually interesting (and afaik undocumented :o)

Is it correct to say that line-scaling only kicks in with proportional scaling, either
via corner-handles, or when entering values into the size boxes (with closed padlock)?

Here's btw. how this stuff looks in Illustrator.
One may simply let the Line width grow towards the inner and everything remains on full pixels, in conjunction with pixel-snap.

PS: Hit the allowed attachment size with a gif of just a bit over 100kb btw.
Maybe one could raise those values a bit in 2016 ;o)

Hoja, thank you for your web file. I've learned something I never knew before.

Basically if you create a rectangle on mouse-off layer, Xara exports that as an html defined rectangle. See the section within the green bordered highlight in the attachment. But if you create Ctrl + Shift +V the rectangle into the mouse-over layer, Xara exports this as a bitmap image, not an html defined rectangle. See the blue highlighted text that loads the 28.png image. This is what's causing your jump on mouse-over, particularly if you have odd sized pixel borders as opposed to even sized pixel borders.

You can avoid this by creating a grouped rectangle, with a smaller internal rectangle which forces Xara to create a png for mouse-off layer.

Not really meeting your Xara wish list I know but hopefully explaining the problem :)

Quote:

---

Originally Posted by Egg Bramhill

But if you create Ctrl + Shift +V the rectangle into the mouse-over layer, Xara exports this as a bitmap image, not an html defined rectangle.
See the blue highlighted text that loads the 28.png image. This is what's causing your jump on mouse-over, particularly if you have odd sized pixel borders as opposed to even sized pixel borders.

---

That's new to me as well – I thought both were recreated in the Browser!

The effect is probably caused by a combination of factors...
Objects not sitting on even pixels to begin with (although the size and coordinates boxes state otherwise) and
then both even get different treatment afterwards.

Quote:

---

Originally Posted by Egg Bramhill

You can avoid this by creating a grouped rectangle, with a smaller internal rectangle which forces Xara to create a png for mouse-off layer.

---

Of course I'd rather the opposite to happen in such simple cases :o)
Both MouseOff and Mouseover rectangles should get recreated inside the Browser. Other Vector geometry should preferably
export as .svg with a fallback solution for older Browsers.


In my present case I use Bitmaps with borders on MouseOff and Text-Panels with quick descriptions on MouseOver.
The latter again get rasterized – but as I now have painstakenly aligned everything, using Phils hint and with grid snap
set to 1px / custom square guide objects I see no misalignment issues currently. But I can't call this workflow elegant.

I rarely use outlines for my web work, prefering to use a black filled shape without a stroke, clone it, change fill to white and use the contour tool to create an inner single contour and hit the inset path icon, as mentioned earlier on in this thread if I remember correctly.

I know this doesn't help your way of working but I only repeat it as an alternative.