---
epic: 2
story: 2.3
title: "CSS & Screen Units"
status: draft
---

## Epic 2 — Unit Conversion System
**Goal:** Support 200+ units across all major categories with SI prefix support.

### Story 2.3: CSS & Screen Units

As a web designer or developer using CalcPad,
I want to convert between CSS units (px, pt, em, rem) using configurable PPI and base font size,
So that I can quickly calculate screen measurements for my designs.

**Acceptance Criteria:**

**Given** the default configuration (PPI=96, em=16px)
**When** the expression `12pt in px` is evaluated
**Then** the result is `16 px` (12pt * 96/72 = 16px)

**Given** the default configuration (PPI=96, em=16px)
**When** the expression `2em in px` is evaluated
**Then** the result is `32 px`

**Given** the user sets `ppi = 326` (Retina display)
**When** the expression `12pt in px` is evaluated
**Then** the result uses the custom PPI: `12 * 326/72 = 54.333... px`

**Given** the user sets `em = 20px`
**When** the expression `2em in px` is evaluated
**Then** the result is `40 px`

**Given** the expression `1rem in px` with default configuration
**When** the engine evaluates it
**Then** it treats `rem` as root em with the same base font size as `em` (16px by default)
**And** the result is `16 px`

**Given** a conversion from `px` to `pt`
**When** the expression `96px in pt` is evaluated at default PPI
**Then** the result is `72 pt`