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

[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

[hoja]

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)

[Egg Bramhill]

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