• Zoom and Scaling

    index
    8
    status
    Draft

    All Blueprint components are zoom-aware, meaning they automatically scale their measurements when used within a Workbench with a zoom level other than 1.

    Automatic Scaling

    The following properties are automatically scaled:

    • All size measurements (padding, margin, borderRadius, etc.)
    • Font sizes and line heights
    • Shadow offsets and blur radii
    • Gap measurements in Layout components
    • Transform translate values

    Units Supported

    The scaling system works with these CSS units:

    • px – Pixels
    • rem – Root em units
    • ch – Character width units
    • lh – Line height units
    • cap, ex, ic – Typography units

    Example

    At zoom level 2:

    <!-- Original values -->
<Element borderRadius="0.5rem">
  <Content fontSize="1rem" padding="0.5rem 1rem">
    Text
  </Content>
</Element>

<!-- Automatically becomes -->
<Element borderRadius="1rem">
  <Content fontSize="2rem" padding="1rem 2rem">
    Text
  </Content>
</Element>

    This ensures that proportions remain consistent across different zoom levels, allowing learners to examine fine details without losing visual relationships.