Skip to content
Apertura
API reference

@apertura/pptx-view

DOM renderer for PowerPoint presentations

4 exported symbols · 4 declared here · 0 re-exported

Classes

PptxView
class PptxView extends BaseDocumentView<PptxDocument>

Renders a presentation: one slide on screen plus navigation. A slide is built by positioning shapes absolutely from their EMU coordinates, scaled to the actual canvas size. That preserves the original composition, which flow layout cannot reproduce. Inheritance from the layout and master is not implemented yet: a shape with no explicit parameters is drawn with defaults. It shows mostly in the size and colour of title fonts.

currentSlideIndex
number
pageOfLocator
(locator: string) => number | undefined
Which slide an address is on. A deck shows one slide at a time, so a highlight on slide forty is in the same position as a highlight on page four hundred of a document: it will never appear by scrolling, because the slide is not drawn. The flow of the address says which slide, and that is the whole answer — no layout is involved, because a slide is a page by construction.
goTo
(index: number) => void
next
() => void
previous
() => void
renderContent
() => Promise<void>
Renders the content into {@link root}. Called on every update.
initialize
() => Promise<void>
The theme is read before the first slide is drawn, once per document.
destroy
() => void
Tear the view down and release resources. The container is left empty.

Interfaces

PptxViewOptions
interface PptxViewOptions extends ViewOptions

What the host may ask of the presentation view beyond the common options. The built-in toolbar exists so that the view is usable on its own — dropped into a page with nothing around it, it must still be possible to reach slide seven. An application that has its own navigator (the playground's toolbar counts slides for every format alike) turns it off and drives `goTo` itself, and then wants to be told when the slide changes so its counter agrees.

toolbar?
boolean | undefined
Draw the previous/next strip under the slide. Default: yes.
notes?
boolean | undefined
Show the speaker notes under the slide. Default: yes.
onSlideChange?
((index: number) => void) | undefined
Called whenever the shown slide changes, with its zero-based index.
locators?
boolean | { hash: string; } | undefined
Stamp shapes and paragraphs with the address extraction gave them. Off by default: a viewer that never highlights anything should pay nothing for the attributes. On, it is what lets a passage found by a retrieval system be scrolled to and highlighted in the deck it came from.

Values

PPTX_VIEW_CSS
PPTX_VIEW_CSS: "\n.apertura-pptx {\n --apertura-canvas-background: #2b2b2f;\n --apertura-slide-background: #ffffff;\n --apertura-slide-text: #1a1a1a;\n --apertura-chrome-text: #d0d0d4;\n\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n background: var(--apertura-canvas-background);\n font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;\n /*\n * Off, because PowerPoint's own default is off.\n *\n * The a:rPr/@kern attribute is a threshold — the run is kerned from that\n * size up — and a file that states none is not kerned at any size. The\n * browser kerns everything, which made every unkerned line narrower than\n * PowerPoint draws it: seven per cent on a 44-point title, and a word\n * wrapped earlier than it should be. Runs that state a threshold turn it\n * back on.\n */\n font-kerning: none;\n}\n\n/*\n * The slide, centred on the stage — but never at the cost of its own edges.\n *\n * Plain `center` centres an item wider than its container too, which puts the\n * overflow on both sides, and a scroll container cannot reach what hangs off\n * its start. A slide zoomed past the window lost its top and its left with no\n * way to scroll to them. `safe` centres while it fits and aligns to the start\n * when it does not.\n */\n.apertura-pptx__stage {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n align-items: safe center;\n justify-content: safe center;\n padding: 24px;\n overflow: auto;\n}\n\n/*\n * The slide's place on the stage, at the size the reader is looking at it.\n *\n * The drawing inside is at the size the file states and is scaled by a\n * transform, which does not affect layout — so this is what the stage lays out,\n * what the shadow is drawn around, and what a scrollbar measures.\n */\n.apertura-pptx__stage-slide {\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);\n flex: 0 0 auto;\n}\n\n/* The slide itself, always at its natural size. */\n\n.apertura-pptx__slide {\n background: var(--apertura-slide-background);\n color: var(--apertura-slide-text);\n overflow: hidden;\n}\n\n/* The shape's own outline, drawn under its text and never intercepting it. */\n\n.apertura-pptx__outline {\n position: absolute;\n inset: 0;\n overflow: visible;\n pointer-events: none;\n}\n\n/* Shapes are positioned absolutely: PresentationML gives explicit coordinates. */\n/*\n * Text sits at the top of its shape unless the shape says otherwise.\n *\n * PresentationML's default anchor is `t`, and centring by default put every\n * unanchored caption half a box lower than the deck was designed with. The\n * shape's own declarations override this when `a:bodyPr/@anchor` states one.\n */\n.apertura-pptx__shape {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow: hidden;\n}\n\n.apertura-pptx__paragraph {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/*\n * A picture's box. What is inside it is either an image element or, for a\n * metafile whose words are worth having in the document, the drawing itself —\n * and the box is what carries the frame so that the two are placed identically.\n */\n.apertura-pptx__image {\n position: absolute;\n overflow: hidden;\n}\n\n/*\n * Filled, not contained: DrawingML sizes a picture by its frame.\n *\n * a:stretch with an empty a:fillRect is what a p:blipFill states, and it means\n * the shape's rectangle exactly, whatever the picture's own proportions are.\n * Where the two agree the difference is invisible, which is most photos; where\n * they do not, contain letterboxes the picture inside a box PowerPoint fills.\n *\n * Worth 133 placed lines of the corpus's 134389 — the largest single gain the\n * presentation loop has had, and it is a one-word change. That is what a\n * default costs when it is the wrong default: nothing was reported as broken,\n * every picture whose frame disagreed with its own proportions was simply a\n * little smaller and a little off, and every word drawn inside one was out of\n * place by a share of its own position.\n */\n.apertura-pptx__image-source {\n width: 100%;\n height: 100%;\n object-fit: fill;\n}\n\n.apertura-pptx__toolbar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 10px;\n color: var(--apertura-chrome-text);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font-size: 13px;\n}\n\n.apertura-pptx__button {\n appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 6px;\n background: transparent;\n color: inherit;\n padding: 5px 12px;\n cursor: pointer;\n font: inherit;\n}\n\n.apertura-pptx__button:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.apertura-pptx__button:disabled {\n opacity: 0.4;\n cursor: default;\n}\n\n.apertura-pptx__counter {\n font-variant-numeric: tabular-nums;\n min-width: 84px;\n text-align: center;\n}\n\n.apertura-pptx__notes {\n flex: 0 0 auto;\n max-height: 25%;\n overflow: auto;\n padding: 10px 16px;\n color: var(--apertura-chrome-text);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font-size: 13px;\n line-height: 1.5;\n white-space: pre-wrap;\n}\n\n/* The bullet hangs in the indent its paragraph reserved for it. */\n\n.apertura-pptx__bullet {\n white-space: pre;\n}\n\n.apertura-pptx__link {\n color: inherit;\n text-decoration: underline;\n cursor: pointer;\n}\n\n.apertura-pptx__table {\n position: absolute;\n table-layout: fixed;\n border-collapse: collapse;\n}\n\n.apertura-pptx__cell {\n border: 1px solid rgba(0, 0, 0, 0.25);\n padding: 0.4% 0.6%;\n vertical-align: top;\n overflow: hidden;\n}\n"
pptxView
pptxView: ViewPlugin<PptxDocument>