Layout

Styling hook. The attributes in the table are supported API for host overrides, for example .ks-viewer[data-ks-size='tiny'] .my-custom-action { display: none; }. See Theme tokens for what else a stylesheet may target.

The phone shell's sheet. In the sheet the bars lay their controls out inline rather than as chips that open popovers: Draw shows a Stroke / Fill switch over the color panel and the weight panel under it, Highlight and Mark text show the color panel with the highlighter inks first, Erase its size slider across the row, Stamp its panel of stamps, Edit Text its font and size over Bold, Italic, Color, Delete and Done. The sheet's head also carries the live readout — an object's size while it is resized, its angle while it is turned — that a desktop shows beside the object, because on a phone the finger doing the dragging covers that spot. A text selection puts its bar in the sheet too, a row of pills above the strip, with its overflow unfolding beneath. The SDK holds no file name and no save state, on a phone as on a desktop: the document's name and "saved just now" belong to your own header above the viewer.

Your own chrome on a phone. A host that draws its own chrome (toolbar.layout: 'none') has no strip to move, and gets the rest on a phone: in a tiny container the active tool's options still rise in the inspector sheet — the same inline layout, head, close and readout — rather than staying a desktop bar wrapped over the page; while no tool runs, the sheet is gone. layout.phone keeps its meaning for the sheet ('dock' gives the row of chips, 'none' keeps the desktop bar) and the sideways rails dock the sheet down the right with no rail on the left. A tablet keeps the desktop composition the host laid its chrome around. The sheet rises from the bottom edge of the SDK's container: a bottom bar of your own belongs below the container, not over it, and the sheet publishes its height on --ks-shell-inset-bottom as ever.

The tablet. On a touch screen the drawing tools' options carry an Input row: Finger (the default) draws with anything; Stylus only ignores a finger, so a hand can rest on the glass while a pen draws and a finger still scrolls the page. One setting, shared by every tool that draws, kept for the session. Manage Pages opens at 800px with the pages four to a row and a 24px check on each selected one; Security opens at 720px with its two jobs side by side; every dialog's controls are 44px (these two dialog sizes follow the browser window, not the container). Crossing into or out of the phone width closes the active tool. The ribbon layout has no phone composition and keeps its own behavior at every width.

Below 480px the dialogs are the screen — title along the top, body scrolling between, actions pinned above the home indicator — and so are Manage Pages, the Security dialog and the sidebar, which becomes "Contents" with its tabs as a row beneath. A toast sits above the strip and the sheet: the viewer tells every portal how tall they are through --ks-portal-inset-bottom. A host's own bottom-anchored surface inside the viewer can read the same height from --ks-shell-inset-bottom on .ks-viewer.

Touch targets on the page. On a coarse pointer the on-page controls change shape as well as reach. A selected object's grips draw at 13px and its rotate handle as a 26px button on a longer stalk, each with a 44px hit box; its action bar sits above the object rather than on it, with 44px actions, and stays inside the page. A text selection gets two round handles under the line, draggable to extend it. Note pins and links take 44px hit boxes; a tap on a link in the document first shows where it goes, with an Open button, and only a second tap — or Open — follows it (links.pill: false turns this off). The erase brush's "Will remove" label rides above the ring instead of under the thumb. Thumbnails show their Rotate and menu on every row, and the search bar's arrows grow to 44px; in a tiny container the bar is a sheet across the top of the document with the field taking the row.

Form fields on touch. Form fields set their text at 16px and scale the element to fit its box, so iOS does not zoom the page into a focused field. While a field has focus a stepper along the bottom of the viewer — Previous, Next, "Field 3 of 11" with the field's name, Done — replaces Tab, which a phone has no key for; it follows the visual viewport up when the keyboard opens and scrolls the focused field clear of it. Read-only and hidden fields are skipped; Done closes the keyboard. forms.stepper: false leaves only the fields.

How a text block is opened on touch. A single tap selects the block and shows a short hint — _"Double-tap or press and hold to edit this text"_ — because a tap that only selects otherwise looks like nothing happened. Either a double-tap or a press-and-hold of about 0.6 seconds then opens the sheet. Holding is canceled the moment the finger moves, so it never steals a drag of the block. The sheet carries the same font, size, bold, italic, color and delete controls as the desktop options bar, plus Save & Close and Cancel. Typing in the sheet edits the text exactly as typing inline does, so font substitution and what is written to the file are identical.

Touch behavior. Drag tools claim the gesture: freehand, line, arrow, rectangle, ellipse, highlight, erase, link, note, pan and both text-selection tools bind their drag to the page; while one is active the viewer sets data-ks-touch-drag="on" and the pages stop handing finger drags to the scroller, and the flag is removed the moment the tool deactivates. A system swipe or an incoming call (pointercancel) calls off the drag in progress and removes its preview, so the next drag starts clean. The outline panel's rename / delete buttons, hover-revealed on a desktop, are always visible and sized for a fingertip on a coarse pointer; the attachments panel shows download on every row at any pointer, and remove too where attachment editing is on. Edit Text watches visualViewport and scrolls the block being edited above the keyboard. Double-tap-to-zoom is suppressed on the viewer (touch-action: manipulation), which removes the browser's ~300ms click delay; panning is unaffected. A bottom toolbar and the floating navigation bar clear the home indicator, and full-screen dialogs clear the notch, provided the host sets viewport-fit=cover.

Two fingers zoom the document. A pinch on the pages zooms the document about the point between the fingers, and the document follows them as they move together; the browser no longer zooms your whole page for it. A second finger landing while the first is drawing turns the gesture into a pinch: the stroke, selection or drag the first finger began is called off and nothing is written, and the finger left behind draws nothing until it lifts. navigation.pinchZoom: false leaves pinching to the browser.