Question

In CSS, we have a box model to define how border, margin, padding, and fill contribute to the total width and height of a rectangle. I’m porting some of my HTML/CSS design into Flash and can’t quite figure out what Flash’s box model is. In Flash, I’ve created a rectangle with gradient fill and a non-scaling 1 pixel stroke. I’m trying to get pixel-perfect positioning and sizing, but the experience has been unpredictable. I’m not really seeing a pattern to the following questions. The answer really changes depending on the exact circumstances.

1. When you set x and y both to be 0, where does the border lay? Is it off the screen? Is it being cut in half by the origin? Or is it completely visible?
2. When you set width to 100, is the fill 98 wide or 100 wide?
3. What happens to the 1px thick border when the rectangle is not positioned at whole number coordinates?

Example:

var sh:Shape = new Shape();
sh.graphics.lineStyle(1.0, 0x00FF00, 1.0, false, LineScaleMode.NONE);
sh.graphics.beginFill(0xFF0000, 1.0);
sh.graphics.drawRect(0, 0, 100, 100);
sh.graphics.endFill();
addChild(sh);
sh.x = 10;
sh.y = 10;

I tried to create a 100×100 square at x:10, y:10. When I measured the total width and height in Photoshop, it came out to be 101×101. Strange! One would either expect the final dimensions to be 100×100 (border on inside) or 102×102 (border on outside).

Answer 1

Strokes in Flash display objects lie along the edges of their fills. This is such that half the stroke lies outside the fill; the other half lies within the fill. This is unlike borders in CSS which lie entirely outside of the content area.

This is best illustrated with an object situated against the stage, that has a solid fill and a semitransparent stroke. In the picture below, the rectangle is 200 by 200 pixels with a 10-pixel stroke. The fill is #00FFFF at 100% alpha and the stroke is #FF0000 at 50% alpha. Notice how the 5-pixel-thick area outside the stroke is blended with the stage color, while the 5-pixel-thick area inside it is blended with the fill color. The total width of each side measured in Photoshop is thus 210 pixels (5 + 200 + 5).

So, to answer your questions…

1. When you set x and y both to be 0, where does the border lay? Is it off the screen? Is it being cut in half by the origin? Or is it completely visible?

   Half of the top and left strokes will be visible within the object. The other half will be cut off by the stage edges.

2. When you set width to 100, is the fill 98 wide or 100 wide?

   The fill is 100 pixels wide. While half of the rectangle’s width on each side is occupied by the stroke, the stroke doesn’t actually take up space or clip the fill; you just don’t see the area of the fill that’s behind the stroke (see above illustration).

3. What happens to the 1px thick border when the rectangle is not positioned at whole number coordinates?

   If stroke hinting isn’t enabled for that stroke, it will be drawn anti-aliased or blurred. If stroke hinting is on, the stroke will be drawn as sharply as possible (while still maintaining enough anti-aliasing).