Rectangle Flip Placement

Plan a preferred axis-aligned popup placement or its opposite when only the latter fully fits; no orthogonal shifting or CSS/DOM layout inference.

Description

Plan a preferred axis-aligned popup placement or its opposite when only the latter fully fits; no orthogonal shifting or CSS/DOM layout inference.

Popup placement can prefer one physical side and try its opposite when the preferred rectangle does not fit.

When to use this tool

Plan a preferred axis-aligned popup placement or its opposite when only the latter fully fits; no orthogonal shifting or CSS/DOM layout inference.

Prepare the supplied anchor, viewport, popupWidth, popupHeight, gap, preferredSide fields for this operation.
Compare the complete example with the representation used by your own input before carrying the result into another step.

How to use the tool and how it works

Enter anchor, viewport, popupWidth, popupHeight, gap, preferredSide. Use the exact text syntax, units and index conventions explained below.
Run the tool. If input validation fails, correct the supplied fields before interpreting any result.
Read result.side, result.rectangle, result.fits. Interpret false, null and empty lists using the distinctions below; they can be valid outputs.

Build a left/right/top/bottom placement with the supplied gap and leading-edge alignment. If the preferred rectangle fails full viewport containment and its opposite fits, flip; otherwise keep preferred. Return side, rectangle and fits.^[1]

Input field	Meaning and representation	Accepted input
anchor	anchor.	List of finite numbers; bounded by the operation
viewport	viewport.	List of finite numbers; bounded by the operation
popupWidth	popup width.	Finite number; zero or greater
popupHeight	popup height.	Finite number; zero or greater
gap	gap.	Finite number; zero or greater
preferredSide	preferred side.	Text; at most 8,192 UTF-16 code units, subject to the grammar above

Output field	Interpretation
result	Object containing the named outputs below.
result.side	The side value under the stated formula or text convention.
result.rectangle	The rectangle list in the ordering and representation described above.
result.fits	Whether the specific declared geometric or capacity condition fits; inspect the signed result too.

json

{
  "input": {
    "anchor": [
      8,
      4,
      1,
      1
    ],
    "viewport": [
      0,
      0,
      10,
      10
    ],
    "popupWidth": 3,
    "popupHeight": 2,
    "gap": 0,
    "preferredSide": "right"
  },
  "output": {
    "result": {
      "side": "left",
      "rectangle": [
        5,
        4,
        3,
        2
      ],
      "fits": true
    }
  }
}

Limitations and assumptions

The tool tests only the preferred and opposite sides. It does not clamp, shift, test every side, handle writing modes or inspect the DOM.
Rectangle arrays use [x,y,width,height] with nonnegative extents. All dimensions must use the same coordinate frame and unit; values are supplied rather than measured from a page.
Every declared top-level field is required and unexpected fields are rejected. Numeric inputs must be finite; ordinary text fields are bounded to 8,192 UTF-16 code units, with tighter operation-specific limits where stated.
String lists have at most 128 entries of at most 128 code units; matrices have at most 128 rows and columns. Larger numeric lists and parsed JSON have separate bounded budgets. Nonfinite results and excessively large serialized outputs are rejected.
Indexes are zero-based and spans have an exclusive end unless explicitly stated otherwise. A valid false, null or empty-list result is distinct from malformed input.

Alternative or Complementary methods

Measure the actual layout when browser behavior matters. The formulas use supplied coordinates and explicit simplifications; they do not account for every box, writing mode, clipping ancestor or simultaneous layout change.

References

Tool behavior and example: Rectangle Flip Placement — tool.io

Similar or alternative tools

Layout Inset Content Rectangle
Compute axis-aligned inset content geometry, retaining an overconstrained flag when opposing insets exceed available size.
Layout Rectangle Overlap Pairs
List unique unordered rectangle pairs with positive overlap area; edge touching, z-order and occlusion are not counted as area overlap.