Arkivprojekt Arkiveret

PDF Builder / Editor

Et dokumentværksted jeg byggede til den oprindelige sandbox: sammensæt flersidede dokumenter i browseren, formatér tekst som i et let tekstbehandlingsprogram, indsæt links og billeder, tilføj signaturer, og eksporter via printdialogen som PDF. Det var aldrig en server-side PDF-motor - værdien lå i redigerings-UX’en og i, hvor langt man kan komme med client-side layout, før browserens print-grænser sætter ind.

Dette projekt vedligeholdes og opdateres ikke længere. Casen og skærmbillederne er bevaret til reference; den gamle demo på sandbox-hosten kan opføre sig anderledes i moderne browsere.

← Tilbage til projekter Kontakt om front-end-arbejde Gammel demo (sandbox)

Hvad det var

PDF Builder / Editor levede udelukkende i statisk HTML, CSS og JavaScript. Hver side var en redigerbar flade med en fast værktøjslinje øverst, valgfrie sidepaneler til sider og printindstillinger, og modaldialoger til links, søgning, signaturer og hjælp. Der var ingen konto og ingen backend: dokumentet blev i browseren, indtil du printede eller ryddede det.

Målet var praktisk dokumentsammensætning - breve, simple rapporter, tjeklister og underskrevne formularer - uden at installere software. Eksport byggede på browserens indbyggede «Gem som PDF»-sti i printdialogen, hvilket holder implementeringen ærlig om, hvad webplatformen reelt kan garantere på tværs af Chrome, Firefox og Edge.

Hovededitoren med værktøjslinje, dokumentflade og statuslinje med ordantal og aktiv side.
  • Fuldt client-side: ingen uploads, ingen server-renderingsfase.
  • Flersidede dokumenter med redigering og navigation pr. side.
  • Live ord- og tegnantal samt sideindikator i statusområdet.
  • Eksempeldokument til at udforske funktioner uden at starte fra nul.
  • Kontekstmenu på markeret tekst til hurtig formatering og lister.

Sidepanel

Sidepanelet behandlede hvert ark som et selvstændigt objekt. Du kunne tilføje sider, hoppe mellem dem, duplikere indhold ved gentagne afsnit, omarrangere stakken eller slette sider. Miniaturer og etiketter gjorde længere dokumenter lettere at overskue end én endeløs contenteditable-blok.

Hver side havde sit eget DOM-træ, så formatering på side tre ikke løb over på side ét. Den adskillelse var vigtig for printmargener og for den mentale model - brugere kunne tænke i «ark» på samme måde som i et desktop-layoutprogram.

Sidehåndtering: tilføj, vælg og organisér flere dokumentark fra sidepanelet.
Et frisk ark klar til indhold - værktøjslinje synlig, margener antydet af print-forhåndsvisningsområdet.
  • Tilføj side udvider dokumentet uden genindlæsning.
  • Omarranger, dupliker og slet fra sidepanelet.
  • Fokus pr. side: værktøjslinjen rammer altid den aktive side.
  • Tom canvas-tilstand til at starte fra bunden.

Formateringsværktøjslinje

Værktøjslinjen dækkede de sædvanlige rich-text-handlinger: fed, kursiv, understregning, gennemstregning, overskrifter fra Normal til Overskrift 6, skriftvalg (Georgia, Arial, Times, Courier, Verdana, Helvetica), tekstfarve og fremhævningsfarve. Justeringsknapper håndterede venstre, centreret og højre; listekontroller understøttede punkttegn (disc, circle, square) og nummererede varianter (1,2,3…, a,b,c…, A,B,C…, romertal).

En Ryd-knap fjernede inline-formatering fra det aktuelle markering - nyttigt efter indsættelse fra Word eller e-mail. Tastaturgenveje spejlede desktop-forventninger: Ctrl+B/I/U til grundstile, Ctrl+Z/Y til fortryd/gentag, Ctrl+A til at markere alt på den aktive side.

Skriftfamilie-dropdown med tekstfarve og fremhævningsfarve.
  • Overskriftsniveauer H1–H6 plus Normal afsnitstil.
  • Seks skriftfamilier og uafhængige tekst-/fremhævningsfarver.
  • Punkt- og nummererede lister med flere nummereringsskemaer.
  • Ryd formatering på aktuel markering.
  • Højreklik-kontekstmenu til hurtigere lister og stilarter.

Indsæt: links, billeder, tabeller, TOC, signaturer

Ud over almindelig tekst tilføjede indsæt-klyngen struktureret indhold. Links åbnede en lille dialog for visningstekst og URL. Billeder kunne placeres med størrelsesvalg. Tabeller og en indholdsfortegnelsesgenerator hjalp længere dokumenter. Signaturer var det mest omfattende flow: tegn på et canvas, upload et billede, eller gengiv skrevet tekst i en håndskriftsagtig skrift med størrelse og farve, og forhåndsvis før indsættelse.

Linkdialog med felter til tekst og URL.
Billedvalg ved indlejring af medier i dokumentet.
Signaturflow: tegn, upload eller skriv - med penseltykkelse, skrift, farve og live-forhåndsvisning.
  • Linkdialog: etiket + URL, indsat som ankertekst.
  • Billedindsættelse med layout-/størrelsesvalg.
  • Tabelbygger til simple gitre i dokumentet.
  • Indholdsfortegnelsesblok til dokumenter med flere sektioner.
  • Signaturtilstande: frihånd, filupload eller typografisk tekst.
  • Signaturforhåndsvisning før den committes til siden.

Søg og erstat

En dedikeret Søg og erstat-dialog (Ctrl+F) gik gennem matches på tværs af dokumentet. Følsom over for store/små bogstaver og kun hele ord indsnævrede resultater; Forrige/Næste lod dig gennemgå træffere før erstatning af én forekomst eller Kør erstat alle.

F3 og Shift+F3 gentog næste/forrige match fra desktop-editorer, og Escape lukkede åbne dialoger uden at miste dokumenttilstanden.

  • Valg for store/små bogstaver.
  • Filter for kun hele ord.
  • Erstat enkelt match eller erstat alle.
  • Tastatur: Ctrl+F til at åbne, F3 / Shift+F3 til at steppe matches.

Printindstillinger og eksport

Printindstillinger åbnede et sidepanel for sidestørrelse (A4, Letter, Legal), orientering (portræt eller landskab) og margener i millimeter. UI’et mindede om at vælge «Gem som PDF» i systemets printdialog - for det er sådan browser-baseret eksport faktisk virker uden et proprietært PDF-bibliotek på serveren.

Handlinger omfattede Print / Gem som PDF, Ryd dokument og Indlæs eksempeldokument. Dokumentinfo holdt styr på ord, tegn, samlede sider og aktiv sideindeks, så du kunne sanity-tjekke længden før eksport.

  • Sidestørrelser: A4, Letter, Legal.
  • Portræt og landskab.
  • Konfigurerbare margener (mm).
  • Print / Gem som PDF via browserens print-pipeline.
  • Genveje til rydning og eksempeldokument.

Hjælp og tastaturgenveje

Et indbygget Hjælp-panel dokumenterede værktøjslinjen, genveje og tips - åbnes med Ctrl+/ og kan lukkes med Escape sammen med de andre modaler.

  • Ctrl+/ - åbn eller luk Hjælp.
  • Ctrl+F - søg og erstat.
  • Ctrl+B / Ctrl+I / Ctrl+U - fed, kursiv, understregning.
  • Ctrl+Z / Ctrl+Y - fortryd og gentag.
  • Ctrl+A - markér alt på den aktive side.
  • Esc - luk dialoger.

Hvorfor det er arkiveret

Jeg udvikler eller supporterer ikke PDF Builder aktivt længere. Browser-API’er, printmotorer og contenteditable-quirks bevæger sig hurtigt; at holde en dokumenteditor poleret er et produkt i sig selv. Værktøjet dokumenteres her, så designvalg og funktionsomfang er synlige i portfolioet, selvom det ikke får rettelser eller nye features.

Har du brug for en vedligeholdt dokumentworkflow i dag, brug en dedikeret editor eller en server-side PDF-pipeline. Denne arkivpost er et snapshot af det, jeg ship’ede på den gamle sandbox - inkl. link til gammel demo af nysgerrighed, ikke som et understøttet produkt.

Skærmbilleder