====== Object Sizing & Spatial Scaling ======

Precise object sizing and proportion control are essential for building balanced, readable homescreen themes in Total Launcher. Every canvas object, whether a standalone app icon, static or dynamic text label, shape container, or complex layout, can be resized, padded, and proportioned using multiple interactive and numeric tools. 

Understanding how canvas boundary resizing interacts with inner content scaling (such as font point sizes, icon dimensions, and frame margins) ensures designs remain crisp, properly aligned, and adaptable across varying screen resolutions.

===== Overview of Sizing Controls =====

Total Launcher provides three distinct methods for modifying the size and proportions of an object:

  * **Interactive Bounding Handles:** Direct touch-and-drag node manipulation on the active workspace.
  * **Numeric & Coordinate Entry:** Exact pixel inputs via transformation and alignment dialogs.
  * **Scaling & Margins:** Independent sizing of graphic icons, typography, and boundary padding inside the object frame.

<WRAP hscroll_box>
<WRAP>
==== Sizing Methods Comparison ====

^  Sizing Method  ^  Target Control  ^  Primary Use Case  ^
| **Corner / Midpoint Handles**\\ ☛ Tap & drag | Object Bounding Frame | Quick canvas scaling, expanding container touch boundaries, and visual layout alignment. |

When an object is selected in **Edit Mode**, a highlighted bounding box appears surrounded by blue anchor nodes:

  * **Location:** Enter ''Edit Mode'' > Tap the target object to reveal bounding guides.

  * **Corner Handles (Diagonal Resizing):** - Dragging any of the four corner nodes expands or shrinks both the width and height simultaneously.
  * **Midpoint Handles (Horizontal / Vertical Stretching):** - Dragging top or bottom nodes alters the vertical height; dragging left or right nodes alters the horizontal width independently.
  * **Touch Boundary vs. Visual Size:** - Expanding the bounding box enlarges the interactive touch-target area on the screen. For vector shapes and backgrounds, the graphic expands to fill the boundary; for icon shortcuts, the icon remains centered within the enlarged touch zone unless internal scaling properties are adjusted.
</WRAP>
<WRAP>
{{tablelayout?colwidth="225px"&rowsHeaderSource=auto&float=left}}
|{{:section:section-object_sizing-content_sizing-sizing-video.webp|Interactive Node Resizing and Bounding Box Handles}}|
</WRAP>
</WRAP>

<WRAP hscroll_box>
<WRAP>
|{{:ui:ui-alpha_block-200x200.webp}}|||
^  Sizing Method  ^  Target Control  ^  Primary Use Case  ^
| **Numeric & Coordinate Entry**\\ ☛ Direct dialog entry | Pixel Width, Height, Coordinates | Pixel-perfect symmetry, standardizing card dimensions, and aligning adjacent panels. |
| **Content Sizing (Icons / Text)** | Icon Size, Font Size, Scale X | Adjusting inner element visibility without expanding the outer frame boundary. |
</WRAP>
<WRAP>
^  **Default**  ^  **Graphic Emphasis**  ^  **Condensed Label**  ^
|  Icon: 180\\ Font: 0\\ Scale X: 100%  |  Icon: 240\\ Font: 30\\ Scale X: 100%  |  Icon: 140\\ Font: 40\\ Scale X: 75%  |
|{{:section:section-object_sizing-content_sizing-sizing-i180_f0_s100-v4.webp}}|{{:section:section-object_sizing-content_sizing-sizing-i240_f30_s100-v4.webp}}|{{:section:section-object_sizing-content_sizing-sizing-i140_f40_s75-v4.webp}}|
</WRAP>
</WRAP>

<WRAP hscroll_box>
<WRAP>
| **Inner Margins (Padding)** | Top, Bottom, Left, Right Offsets | Scaling graphics proportionally or positioning text asymmetrically within a container. |

Resizing the outer boundary does not always resize the graphic or text inside. Total Launcher separates the container boundaries from the rendered content:

== Sizing Graphic Icons ==
  * **Location:** Select object > Tap {{:ui:ui-icon_option-v4.webp?20}} (Options) > ''Icon''
  * **Icon size:** - Scales the visual graphic dimensions independently of the touch boundary (e.g., standard baseline values range from ''100'' to ''250'').
  * **Icon padding:** - Increases or decreases the inner clearance around the icon graphic within its bounding slot.

== Sizing Typography & Labels ==
  * **Location:** Select object > Tap {{:ui:ui-icon_option-v4.webp?20}} (Options) > ''Label''
  * **Font size:** - Controls text point size (Range: ''0'' to ''115'').
    * **''0'' (Dynamic Auto-Fit):** Automatically calculates the ideal font size based on available row height and bounding frame space (equivalent to a baseline of approximately ''60'').
    * **''1'' to ''59'':** Enforces a fixed, smaller point size below the auto-fit baseline.
    * **''60'' to ''115'':** Enforces an enlarged, fixed point size above the standard baseline.
  * **Scale X (%):** - Stretches (''101%''–''200%'') or condenses (''50%''–''99%'') text horizontally to fit long names across single lines.

For shape objects, background containers, and graphic frames, inner **Margins** act as a proportional scaler:

  * **Location:** Select object > Tap {{:ui:ui-icon_option-v4.webp?20}} (Options) > ''Margins'' (or ''Background > Margins'')

== Margin Scaling Behavior ==
  * **Positive Margins (Shrink / Inset):** - Increasing margin numbers (e.g., setting Left, Top, Right, Bottom to ''20'') pushes the graphic inward toward the center, effectively shrinking the rendered image while preserving the full touch-target boundary.
  * **Uniform Margins:** - Applying identical values across all four edges scales the graphic up or down without distorting its aspect ratio.
  * **Asymmetrical Margins:** - Entering different values on specific edges offsets the graphic to make room for accompanying text labels or secondary indicators.
</WRAP>
<WRAP>
{{:section:section-object_sizing-margin-video-v4.webp|Object Sizing using Margins}}
</WRAP>
</WRAP>

----

===== 5. Do's and Don'ts Sizing Guide =====

  * **Do use Font size ''0'' (Auto-Fit)** for dynamic data fields (such as weather conditions or next calendar events) where text lengths change constantly.
  * **Do expand outer bounding boxes** for small, hard-to-tap icon shortcuts to create generous, comfortable touch targets without enlarging the visible graphic.
  * **Do link uniform margins** when reducing the size of custom frosted glass containers or shaped icon backings.
  * **Don't force high fixed Font sizes (e.g., ''90+'')** on multiline labels without verifying line clearance, as descenders and multi-line breaks may clip outside container boundaries.
  * **Don't resize layout containers smaller than their minimum row constraints**, as contained items will compress or overflow past screen edges.

----

===== 6. Related Manual Sections =====

  * **[[section:section-margins-page_and_object|Margins & Positioning]]:** In-depth reference for calculating padding, margins, and container offsets.
  * **[[section:section-layout-landing|Layout Objects]]:** Configuration rules for Grid, Circle, and List layout container bounds.
  * **[[section:section-resources|Resource Management]]:** Handling Shape radii, vector scalings, and dynamic graphic assets.
  * **[[ui:ui-layout-list|UI: List Layout Canvas]]:** Visual reference for canvas boundary coordinate markers and transformation tools.

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>