Show 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.

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

Show the ruler

Continue with /sample.docx from the Quickstart, then enable the ruler:

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());

Vanilla also needs an Editor mount:

<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

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

onPageMarginsChange reports the changed side and the section's current margins in inches. Use the Document API sections reference for other page setup changes.

Continue with Responsive layout to fit the Editor to its container and adapt its chrome when space becomes tight.