# Show the ruler

> Show the horizontal ruler and let people adjust a section's left and right page margins.



## Try the ruler [#try-the-ruler]

Expand the Editor and click in the document to activate its section. Drag either margin handle to reflow the page, then
switch between inches and centimeters without changing the margins.

> **Interactive editor: Adjust page margins**
>
> Sample: [open the fixture](/fixtures/ruler-sample.docx).
>
> Preset: `ruler`.
>
> Ruler controls available in the interactive Editor:
>
> - **Ruler — `ui.ruler`:** show or hide the horizontal ruler. Click in the document to activate a section, then drag its handles to change the left and right page margins.
> - **Measurements — `measurementUnit`:** display Editor measurements in inches or centimeters. Switching units does not change the margins.
>
> Local DOCX selection: disabled.


The ruler follows the active section. In Viewing mode it remains visible but read-only. Web layout hides it.

## Show the ruler [#show-the-ruler]

Continue with `/sample.docx` from the [Quickstart](/editor/quickstart), then enable the ruler:

**Vanilla — `src/main.ts`**

```ts
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  ui: {
    ruler: true,
  },
  measurementUnit: 'in',
});

window.addEventListener('beforeunload', () => superdoc.destroy());

```

**React — `src/App.tsx`**

```tsx
import { SuperDocEditor, type SuperDocEditorProps } from '@superdoc/react';
import '@superdoc/react/style.css';

const editorConfig = {
  ui: {
    ruler: true,
  },
  measurementUnit: 'in',
} satisfies Pick<SuperDocEditorProps, 'ui' | 'measurementUnit'>;

export default function App() {
  return <SuperDocEditor document='/sample.docx' {...editorConfig} />;
}

```


Vanilla also needs an Editor mount:

```html
<div id="editor" style="height: 70vh"></div>

<script type="module" src="/src/main.ts"></script>

```

`ui.ruler` controls the built-in surface. Show or hide it later with `toggleRuler()`.

`measurementUnit` is an Editor-wide preference, so it stays at the top level rather than inside `ui.ruler`. Set the
initial unit to inches or centimeters, then change it with `setMeasurementUnit()`.

## Configure the ruler [#configure-the-ruler]

Choose a field to see its type, default, and a configuration fragment you can copy.

### Ruler

| Field | Type | Default | Status | Summary | API details | Guide |
| --- | --- | --- | --- | --- | --- | --- |
| `ui.ruler` | `false \| true \| { container?: string \| HTMLElement; }` | `false` | Optional | Show the horizontal ruler, or provide a container for an external mount. | Built-in ruler. Disabled by default. | — |

### Measurements

| Field | Type | Default | Status | Summary | API details | Guide |
| --- | --- | --- | --- | --- | --- | --- |
| `measurementUnit` | `"in" \| "cm"` | `'in'` | Optional | Display measurements across this Editor in inches or centimeters. | Starting measurement unit for rulers and measurement fields (Word's "measurement units" preference). Defaults to `'in'` (Word's en-US default). Change it at runtime with `setMeasurementUnit()`. See `SuperDocMeasurementUnit`. | — |

### Events

| Field | Type | Default | Status | Summary | API details | Guide |
| --- | --- | --- | --- | --- | --- | --- |
| `onPageMarginsChange` | `(params: { documentId: string; editorVersion: 2; sectionId: string; sectionIndex: number; side: "left" \| "right"; value: number; pageMargins: { top?: number; right?: number; bottom?: number; left?: number; }; }) => void` | — | Optional | Run application code after a ruler drag changes a section margin. | Callback after a ruler drag changes the active section's left or right page margin. | — |


`onPageMarginsChange` reports the changed side and the section's current margins in inches. Use the
[Document API sections reference](/document-api/reference/sections/) for other page setup changes.

Continue with [Responsive layout](/editor/built-in-ui/responsive-layout) to fit the Editor to its container and adapt
its chrome when space becomes tight.