Files
bentopdf/src/pages/edit-pdf-text.html
T
2026-09-04 16:26:08 +05:30

1421 lines
47 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
/>
<meta name="color-scheme" content="dark" />
<meta
name="title"
content="Edit Text in a PDF Free - Rewrite with Live Reflow | BentoPDF"
/>
<meta
name="description"
content="Click any paragraph and edit it in place with live reflow, fonts, and styling. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="keywords"
content="edit pdf text, pdf text editor, change pdf text, rewrite pdf paragraph"
/>
<meta name="author" content="BentoPDF" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<link rel="canonical" href="https://www.bentopdf.com/edit-pdf-text" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/edit-pdf-text" />
<meta
property="og:title"
content="Edit Text in a PDF Free - Rewrite with Live Reflow | BentoPDF"
/>
<meta
property="og:description"
content="Click any paragraph and edit it in place with live reflow, fonts, and styling. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta property="og:site_name" content="BentoPDF" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://www.bentopdf.com/edit-pdf-text" />
<meta
name="twitter:title"
content="Edit Text in a PDF Free - Rewrite with Live Reflow | BentoPDF"
/>
<meta
name="twitter:description"
content="Edit PDF text in place with live reflow. Free, private, in your browser."
/>
<meta name="twitter:site" content="@BentoPDF" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Edit PDF Text" />
<title>Edit Text in a PDF Free - Rewrite with Live Reflow | BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<link href="/src/css/edit-pdf-text.css" rel="stylesheet" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/images/favicon-512x512.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/apple-touch-icon.png"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
</head>
<body class="antialiased bg-gray-900">
{{> navbar }}
<div
id="uploader"
class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
>
<div
id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-blue-400 border border-gray-700"
>
<button
id="back-to-tools"
class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
>
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools">
Back to Tools
</span>
</button>
<h1
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:editPdfText.name"
>
Edit PDF Text
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:editPdfText.subtitle">
Click any paragraph and edit it in place with live reflow, fonts, and
styling.
</p>
<div
id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400">
<span class="font-semibold" data-i18n="upload.clickToSelect"
>Click to select a file</span
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500" data-i18n="upload.hints.pdfFile">
PDF file
</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
Your files never leave your device.
</p>
</div>
<input
id="file-input"
type="file"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf"
/>
</div>
</div>
</div>
<div id="tool-landing">
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
data-i18n="howItWorks.title"
>
How It Works
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
1
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:editPdfText.howToUpload"
>
Upload PDF
</h3>
<p class="text-gray-400">
Select or drag and drop the PDF whose text you want to edit
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
2
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:editPdfText.howToClick"
>
Click a Paragraph
</h3>
<p class="text-gray-400">
Every editable paragraph is outlined. Click one and type; text
reflows live as you edit
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
3
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:editPdfText.howToRestyle"
>
Restyle Anything
</h3>
<p class="text-gray-400">
Change fonts, size, color, alignment and spacing, move or
replace images, add new text boxes
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
4
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="common.save"
>
Save
</h3>
<p class="text-gray-400">
Download a clean PDF with your edits baked in, and everything
stays on your device
</p>
</div>
</div>
</div>
</section>
<section class="max-w-6xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="relatedTools.title"
>
Related PDF Tools
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a
href="pdf-editor.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:pdfEditor.name"
>
PDF Editor
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:editPdfText.relatedPdfEditor"
>
Annotate and mark up PDFs
</p>
</a>
<a
href="sign-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:signPdf.name"
>
Sign PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:editPdfText.relatedSignPdf"
>
Draw, type or upload a signature
</p>
</a>
<a
href="add-watermark.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:addWatermark.name"
>
Add Watermark
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:editPdfText.relatedWatermark"
>
Stamp text or images
</p>
</a>
<a
href="add-stamps.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:addStamps.name"
>
Add Stamps
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:editPdfText.relatedStamps"
>
Place stamps on pages
</p>
</a>
<a
href="compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:compressPdf.name"
>
Compress PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:editPdfText.relatedCompress"
>
Shrink the file size
</p>
</a>
<a
href="organize-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:editPdfText.relatedOrganizeName"
>
Organize PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:editPdfText.relatedOrganize"
>
Reorder and manage pages
</p>
</a>
</div>
</section>
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
Can I edit the text in a scanned PDF?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Not with this tool. A scanned page is a picture, and even after
OCR the text is an invisible layer over that picture, so there are
no glyphs to edit. The editor detects this and shows a notice that
the page's text blocks are an OCR layer, searchable and selectable
but not editable.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does the text reflow when I add or delete words?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Within the paragraph you are editing, lines rewrap live as you
type and the block grows or shrinks to fit. Other paragraphs and
pages stay where they are, so check that a much longer paragraph
doesn't run into the content below it.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I use a font from my computer?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Open the Font menu and choose System fonts to list the fonts
installed on your machine. This relies on the Local Font Access
API, which is currently available in Chrome and Edge; in other
browsers you can still use the fonts already embedded in the
document.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Is there a find and replace across the whole document?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The Find &amp; Replace bar offers Next, Replace, and Replace All,
with Match case, Whole word, and Ignore accents options. Replace
All works through every page of the document, not just the one on
screen.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I edit images and shapes, not just text?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Use the Edit menu to choose Text, Images, Shapes, or Edit All,
which controls what is selectable on busy pages. Images can be
moved, rotated in 90 degree steps, flipped, or replaced while
keeping their placement, you can add new images and text boxes,
and shapes expose their path stroke settings.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What happens if the PDF is digitally signed or is PDF/A?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Editing a signed document invalidates its signature, so the editor
warns you and saves your changes as an appended revision, which
keeps the original signed version verifiable. For PDF/A files it
warns that edits may break conformance.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Will the editor open a password-protected PDF?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It asks for the password first and then opens the document for
editing. The saved copy is written from the decrypted document, so
if you still need protection, add it again with
<a
href="/protect-pdf"
class="text-indigo-300 hover:text-indigo-400"
>Protect PDF</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How is this different from the PDF Editor tool?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
This tool changes the text, images, and shapes that are already
part of the page, with fonts, spacing, alignment, lists, and
right-to-left support. The
<a href="/edit-pdf" class="text-indigo-300 hover:text-indigo-400"
>PDF Editor</a
>
is for annotating: highlights, comments, drawings, and other
markup layered on top of the page.
</p>
</details>
</div>
</section>
{{> footer }}
</div>
<div id="text-editor-app" hidden>
<div id="toolbar">
<div class="tgroup">
<button
id="exitEditor"
class="btn icon"
title="Back to upload"
data-i18n-title="tools:editPdfText.tipBackToUpload"
>
<i class="ph ph-arrow-left"></i>
</button>
<label
class="btn"
for="file"
title="Open another PDF"
data-i18n-title="tools:editPdfText.tipOpenAnotherPdf"
>
<i class="ph ph-folder-open"></i
><span data-i18n="tools:editPdfText.open">Open</span>
</label>
<input id="file" type="file" accept="application/pdf" hidden />
<button
id="save"
class="btn"
disabled
title="Export (⌘S)"
data-i18n-title="tools:editPdfText.tipExportS"
>
<i class="ph ph-export"></i
><span data-i18n="tools:editPdfText.export">Export</span>
</button>
<button
id="undo"
class="btn icon"
disabled
hidden
title="Undo (⌘Z)"
data-i18n-title="tools:editPdfText.tipUndoZ"
>
<i class="ph ph-arrow-u-up-left"></i>
</button>
<button
id="redo"
class="btn icon"
disabled
hidden
title="Redo (⇧⌘Z)"
data-i18n-title="tools:editPdfText.tipRedoZ"
>
<i class="ph ph-arrow-u-up-right"></i>
</button>
</div>
<button
id="docName"
class="docname"
hidden
title="File details"
data-i18n-title="tools:editPdfText.tipFileDetails"
></button>
<span class="sep"></span>
<div id="tools" class="segmented">
<button
data-tool="edit"
class="on"
title="Edit existing content"
data-i18n-title="tools:editPdfText.tipEditExistingContent"
>
<i class="ph ph-pencil-simple"></i
><span id="editLabel">Edit All</span
><i class="ph ph-caret-down editcaret"></i>
</button>
<select
id="editScope"
hidden
title="What the Edit tool touches: narrow the scope on busy pages"
data-i18n-title="tools:editPdfText.tipWhatTheEditToolTouchesNarrowTheScopeOnBus"
>
<option
value="all"
selected
data-i18n="tools:editPdfText.filterAll"
>
All
</option>
<option value="text" data-i18n="tools:editPdfText.filterText">
Text
</option>
<option value="image" data-i18n="tools:editPdfText.filterImages">
Images
</option>
<option value="shape" data-i18n="tools:editPdfText.filterShapes">
Shapes
</option>
</select>
<button
data-tool="addText"
title="Click the page to add a text box"
data-i18n-title="tools:editPdfText.tipClickThePageToAddATextBox"
>
<i class="ph ph-textbox"></i
><span data-i18n="tools:editPdfText.addText">Add Text</span>
</button>
</div>
<input id="imgFile" type="file" accept="image/*" hidden />
<div class="tgroup viewopts" hidden>
<label class="chk"
><input id="spellchk" type="checkbox" /> Spelling</label
>
<select
id="spellLang"
title="Spell-check language"
data-i18n-title="tools:editPdfText.tipSpellCheckLanguage"
>
<option value="" data-i18n="tools:editPdfText.langAuto">
Auto
</option>
<option value="en">English (US)</option>
<option value="en-GB">English (UK)</option>
<option value="de">Deutsch</option>
<option value="fr">Français</option>
<option value="es">Español</option>
<option value="it">Italiano</option>
<option value="pt">Português</option>
<option value="ar">العربية</option>
<option value="hi">हिन्दी</option>
</select>
<label class="chk"
><input id="rulersChk" type="checkbox" /> Rulers</label
>
</div>
<span id="info" class="info"></span>
<div class="tgroup toolright">
<button
id="find"
class="btn icon"
title="Find &amp; replace"
data-i18n-title="tools:editPdfText.tipFindAndReplace"
>
<i class="ph ph-magnifying-glass"></i>
</button>
<button
id="addImage"
class="btn icon"
title="Add an image"
data-i18n-title="tools:editPdfText.tipAddAnImage"
>
<i class="ph ph-image"></i>
</button>
<button
id="copyText"
class="btn icon"
hidden
title="Copy this page's text in reading order"
data-i18n-title="tools:editPdfText.tipCopyThisPageSTextInReadingOrder"
>
<i class="ph ph-clipboard-text"></i>
</button>
<button
id="spellPage"
class="btn icon"
hidden
title="Check the spelling of this page"
data-i18n-title="tools:editPdfText.tipCheckTheSpellingOfThisPage"
>
<i class="ph ph-text-aa"></i>
</button>
<span class="sep"></span>
<button
id="toggleInspector"
class="btn icon"
title="Show or hide the format panel"
data-i18n-title="tools:editPdfText.tipShowOrHideTheFormatPanel"
>
<i class="ph ph-sidebar-simple"></i>
</button>
</div>
</div>
<div id="spellbar" hidden>
<i class="ph ph-text-aa barlead"></i>
<span id="spellWord" class="info"></span>
<input
id="spellFix"
placeholder="Replace with"
data-i18n-placeholder="tools:editPdfText.phReplaceWith"
/>
<button
id="spellChange"
class="btn"
data-i18n="tools:editPdfText.change"
>
Change
</button>
<button
id="spellIgnore"
class="btn"
data-i18n="tools:editPdfText.ignore"
>
Ignore
</button>
<button
id="spellAdd"
class="btn"
title="Add to your dictionary"
data-i18n="common.add"
data-i18n-title="tools:editPdfText.tipAddToYourDictionary"
>
Add
</button>
<button id="spellNext" class="btn" data-i18n="tools:editPdfText.next">
Next
</button>
<span id="spellStatus" class="info"></span>
<button
id="spellDone"
class="btn icon"
title="Close"
data-i18n-title="tools:editPdfText.tipClose"
>
<i class="ph ph-x"></i>
</button>
</div>
<div id="main">
<div id="findbar" hidden>
<div class="findhead">
<span class="findtitle"
><i class="ph ph-magnifying-glass barlead"></i> Find &amp;
Replace</span
>
<button
id="findDone"
class="btn icon"
title="Close"
data-i18n-title="tools:editPdfText.tipClose"
>
<i class="ph ph-x"></i>
</button>
</div>
<div class="findfield">
<input
id="findText"
placeholder="Find"
data-i18n-placeholder="tools:editPdfText.phFind"
/>
<button
id="findPrev"
class="btn icon"
title="Previous match"
data-i18n-title="tools:editPdfText.tipPreviousMatch"
>
<i class="ph ph-caret-up"></i>
</button>
<button
id="findNext"
class="btn icon"
title="Next match"
data-i18n-title="tools:editPdfText.tipNextMatch"
>
<i class="ph ph-caret-down"></i>
</button>
</div>
<input
id="replText"
placeholder="Replace with"
data-i18n-placeholder="tools:editPdfText.phReplaceWith"
/>
<div class="findrow">
<button
id="replOne"
class="btn grow"
data-i18n="tools:editPdfText.replace"
>
Replace
</button>
<button
id="replAll"
class="btn grow"
data-i18n="tools:editPdfText.replaceAll"
>
Replace All
</button>
</div>
<label class="chk"
><input id="caseSens" type="checkbox" /> Match case</label
>
<label class="chk"
><input id="wholeWord" type="checkbox" /> Whole word</label
>
<label class="chk"
><input id="noAccents" type="checkbox" /> Ignore accents</label
>
<span id="findStatus" class="findstatus"></span>
</div>
<div id="stage">
<div id="empty">
<h1 data-i18n="tools:editPdfText.name">Edit PDF Text</h1>
<p data-i18n="tools:editPdfText.emptyState">
Open a PDF to edit its text, images and shapes.
</p>
<label
class="btn big"
for="file"
data-i18n="tools:editPdfText.choosePdf"
>Choose a PDF…</label
>
<p class="hint">
Everything runs locally in your browser, and nothing is uploaded.
</p>
</div>
<div id="pageWrap" hidden>
<canvas id="page"></canvas>
<div id="overlay"></div>
</div>
</div>
<div id="zoomHud" hidden></div>
<div id="contextbar">
<div class="tgroup">
<button
id="rotL"
class="btn icon objbtn"
hidden
title="Rotate left 90°"
data-i18n-title="tools:editPdfText.tipRotateLeft90"
>
<i class="ph ph-arrow-counter-clockwise"></i>
</button>
<button
id="rotR"
class="btn icon objbtn"
hidden
title="Rotate right 90°"
data-i18n-title="tools:editPdfText.tipRotateRight90"
>
<i class="ph ph-arrow-clockwise"></i>
</button>
<button
id="flipH"
class="btn icon objbtn"
hidden
title="Flip horizontal"
data-i18n-title="tools:editPdfText.tipFlipHorizontal"
>
<i class="ph ph-flip-horizontal"></i>
</button>
<button
id="flipV"
class="btn icon objbtn"
hidden
title="Flip vertical"
data-i18n-title="tools:editPdfText.tipFlipVertical"
>
<i class="ph ph-flip-vertical"></i>
</button>
<span class="sep objsep" hidden></span>
<button
id="replImg"
class="btn icon objbtn"
hidden
title="Replace this image, keeping its placement"
data-i18n-title="tools:editPdfText.tipReplaceThisImageKeepingItsPlacement"
>
<i class="ph ph-image-square"></i>
</button>
<button
id="extEdit"
class="btn icon objbtn"
hidden
title="Save this image as a PNG, edit it in any app; saved changes re-import automatically"
>
<i class="ph ph-arrow-square-out"></i>
</button>
<button
id="altText"
class="btn icon objbtn"
hidden
title="Alternate text for accessibility (tagged PDFs)"
data-i18n-title="tools:editPdfText.tipAlternateTextForAccessibilityTaggedPdfs"
>
<i class="ph ph-tag"></i>
</button>
<input id="replImgFile" type="file" accept="image/*" hidden />
<span class="sep objsep" hidden></span>
<button
id="front"
class="btn icon objbtn"
hidden
title="Bring to front"
data-i18n-title="tools:editPdfText.tipBringToFront"
>
<i class="ph ph-arrow-line-up"></i>
</button>
<button
id="back"
class="btn icon objbtn"
hidden
title="Send to back"
data-i18n-title="tools:editPdfText.tipSendToBack"
>
<i class="ph ph-arrow-line-down"></i>
</button>
<button
id="dupe"
class="btn icon objbtn"
hidden
title="Duplicate"
data-i18n-title="tools:editPdfText.tipDuplicate"
>
<i class="ph ph-copy"></i>
</button>
<button
id="del"
class="btn icon objbtn"
hidden
title="Delete"
data-i18n-title="tools:editPdfText.tipDelete"
>
<i class="ph ph-trash"></i>
</button>
</div>
<div id="alignTools" class="segmented" hidden>
<button
data-al="left"
title="Align left edges"
data-i18n-title="tools:editPdfText.tipAlignLeftEdges"
>
<i class="ph ph-align-left"></i>
</button>
<button
data-al="hcenter"
title="Align horizontal centers"
data-i18n-title="tools:editPdfText.tipAlignHorizontalCenters"
>
<i class="ph ph-align-center-horizontal"></i>
</button>
<button
data-al="right"
title="Align right edges"
data-i18n-title="tools:editPdfText.tipAlignRightEdges"
>
<i class="ph ph-align-right"></i>
</button>
<button
data-al="top"
title="Align tops"
data-i18n-title="tools:editPdfText.tipAlignTops"
>
<i class="ph ph-align-top"></i>
</button>
<button
data-al="vcenter"
title="Align vertical centers"
data-i18n-title="tools:editPdfText.tipAlignVerticalCenters"
>
<i class="ph ph-align-center-vertical"></i>
</button>
<button
data-al="bottom"
title="Align bottoms"
data-i18n-title="tools:editPdfText.tipAlignBottoms"
>
<i class="ph ph-align-bottom"></i>
</button>
<button
data-al="disth"
title="Distribute horizontally"
data-i18n-title="tools:editPdfText.tipDistributeHorizontally"
>
<i class="ph ph-columns"></i>
</button>
<button
data-al="distv"
title="Distribute vertically"
data-i18n-title="tools:editPdfText.tipDistributeVertically"
>
<i class="ph ph-rows"></i>
</button>
</div>
</div>
<aside id="inspector" hidden>
<h2><i class="ph ph-sliders-horizontal"></i> Format</h2>
<h3 class="sect" data-i18n="tools:editPdfText.font">Font</h3>
<div class="row">
<select id="fFamily"></select>
<input
id="fSize"
type="number"
min="1"
max="400"
step="1"
class="num"
title="Font size"
data-i18n-title="tools:editPdfText.tipFontSize"
/>
</div>
<div class="row">
<button
id="sysFonts"
class="btn grow"
title="List fonts installed on this device (Chromium)"
data-i18n-title="tools:editPdfText.tipListFontsInstalledOnThisDeviceChromium"
>
<i class="ph ph-download-simple"></i
><span data-i18n="tools:editPdfText.systemFonts"
>System fonts</span
>
</button>
</div>
<h3 class="sect" data-i18n="tools:editPdfText.color">Color</h3>
<div class="row swatchrow">
<div class="swatches" id="fSwatches"></div>
<input
id="fColor"
type="color"
value="#000000"
title="Custom text color"
data-i18n-title="tools:editPdfText.tipCustomTextColor"
/>
</div>
<h3 class="sect" data-i18n="tools:editPdfText.alignment">
Alignment
</h3>
<div class="row">
<div class="segmented small grow" id="fAlign">
<button
data-a="0"
title="Align left"
data-i18n-title="tools:editPdfText.tipAlignLeft"
>
<i class="ph ph-text-align-left"></i>
</button>
<button
data-a="1"
title="Align center"
data-i18n-title="tools:editPdfText.tipAlignCenter"
>
<i class="ph ph-text-align-center"></i>
</button>
<button
data-a="2"
title="Align right"
data-i18n-title="tools:editPdfText.tipAlignRight"
>
<i class="ph ph-text-align-right"></i>
</button>
<button
data-a="3"
title="Justify"
data-i18n-title="tools:editPdfText.tipJustify"
>
<i class="ph ph-text-align-justify"></i>
</button>
</div>
</div>
<h3 class="sect" data-i18n="tools:editPdfText.style">Style</h3>
<div class="row toggles" id="fToggles">
<button
data-t="bold"
title="Bold"
data-i18n-title="tools:editPdfText.tipBold"
>
<i class="ph ph-text-b"></i>
</button>
<button
data-t="italic"
title="Italic"
data-i18n-title="tools:editPdfText.tipItalic"
>
<i class="ph ph-text-italic"></i>
</button>
<button
data-t="underline"
title="Underline"
data-i18n-title="tools:editPdfText.tipUnderline"
>
<i class="ph ph-text-underline"></i>
</button>
<button
data-t="strike"
title="Strikethrough"
data-i18n-title="tools:editPdfText.tipStrikethrough"
>
<i class="ph ph-text-strikethrough"></i>
</button>
<button
data-t="sup"
title="Superscript"
data-i18n-title="tools:editPdfText.tipSuperscript"
>
<i class="ph ph-text-superscript"></i>
</button>
<button
data-t="sub"
title="Subscript"
data-i18n-title="tools:editPdfText.tipSubscript"
>
<i class="ph ph-text-subscript"></i>
</button>
</div>
<h3 class="sect" data-i18n="tools:editPdfText.lists">Lists</h3>
<div class="row">
<div class="segmented small" id="fList">
<button
data-l="bullet"
title="Toggle bulleted item"
data-i18n-title="tools:editPdfText.tipToggleBulletedItem"
>
<i class="ph ph-list-bullets"></i>
</button>
<button
data-l="number"
title="Toggle numbered item"
data-i18n-title="tools:editPdfText.tipToggleNumberedItem"
>
<i class="ph ph-list-numbers"></i>
</button>
</div>
<select
id="fMarkerStyle"
title="Numbered-list marker style"
data-i18n-title="tools:editPdfText.tipNumberedListMarkerStyle"
>
<option value="1">1. 2. 3.</option>
<option value="a">a. b. c.</option>
<option value="A">A. B. C.</option>
<option value="i">i. ii. iii.</option>
<option value="I">I. II. III.</option>
</select>
<div class="segmented small" id="fLevel">
<button
data-lv="-1"
title="Decrease list indent (⇧Tab)"
data-i18n-title="tools:editPdfText.tipDecreaseListIndentTab"
>
<i class="ph ph-text-outdent"></i>
</button>
<button
data-lv="1"
title="Increase list indent (Tab)"
data-i18n-title="tools:editPdfText.tipIncreaseListIndentTab"
>
<i class="ph ph-text-indent"></i>
</button>
</div>
</div>
<h3 class="sect" data-i18n="tools:editPdfText.outline">Outline</h3>
<div class="row">
<input
id="fStrokeColor"
type="color"
value="#000000"
title="Text outline color"
data-i18n-title="tools:editPdfText.tipTextOutlineColor"
/>
<input
id="fStrokeW"
type="number"
min="0"
max="20"
step="0.1"
class="num"
title="Outline width (0 = none)"
data-i18n-title="tools:editPdfText.tipOutlineWidth0None"
/>
</div>
<h3 class="sect" data-i18n="tools:editPdfText.spacing">Spacing</h3>
<label class="field"
>Line Spacing
<input
id="fLine"
type="number"
min="0.6"
max="4"
step="0.05"
class="num"
/></label>
<label class="field"
>Paragraph Spacing
<input
id="fPara"
type="number"
min="0"
max="200"
step="1"
class="num"
/></label>
<label class="field"
>Character Spacing
<input
id="fChar"
type="number"
min="-3"
max="30"
step="0.1"
class="num"
/></label>
<label class="field"
>Word Spacing
<input
id="fWordSp"
type="number"
min="-10"
max="100"
step="0.5"
class="num"
/></label>
<label class="field"
>Horizontal Scale %
<input
id="fHScale"
type="number"
min="10"
max="400"
step="1"
class="num"
/></label>
<label class="field"
>First-line Indent
<input
id="fFirstInd"
type="number"
min="0"
max="300"
step="1"
class="num"
/></label>
<label class="field"
>Hanging Indent
<input
id="fHangInd"
type="number"
min="0"
max="300"
step="1"
class="num"
/></label>
<h3 class="sect" data-i18n="tools:editPdfText.direction">
Direction
</h3>
<div class="row">
<div class="segmented small grow" id="fDir">
<button
data-d="0"
title="From content"
data-i18n="tools:editPdfText.dirAuto"
data-i18n-title="tools:editPdfText.tipFromContent"
>
Auto
</button>
<button
data-d="1"
title="Left to right"
data-i18n-title="tools:editPdfText.tipLeftToRight"
>
LTR
</button>
<button
data-d="2"
title="Right to left"
data-i18n-title="tools:editPdfText.tipRightToLeft"
>
RTL
</button>
</div>
</div>
<div class="row" id="pStrokeRow" hidden>
<span class="chk" data-i18n="tools:editPdfText.pathStroke"
>Path stroke</span
>
<input
id="pStrokeColor"
type="color"
value="#000000"
title="Stroke color"
data-i18n-title="tools:editPdfText.tipStrokeColor"
/>
<input
id="pStrokeW"
type="number"
min="0"
max="40"
step="0.5"
class="num"
title="Stroke width"
data-i18n-title="tools:editPdfText.tipStrokeWidth"
/>
</div>
</aside>
</div>
<div id="viewbar">
<div class="vbzoom">
<button
id="zoomMenuBtn"
class="btn vbzoomlabel"
title="Zoom presets"
data-i18n-title="tools:editPdfText.tipZoomPresets"
>
<span id="zoomLabel" class="label">100%</span
><i class="ph ph-caret-down editcaret"></i>
</button>
<button
id="zoomOut"
class="btn icon"
title="Zoom out"
data-i18n-title="tools:editPdfText.tipZoomOut"
>
<i class="ph ph-minus-circle"></i>
</button>
<button
id="zoomIn"
class="btn icon"
title="Zoom in"
data-i18n-title="tools:editPdfText.tipZoomIn"
>
<i class="ph ph-plus-circle"></i>
</button>
<button
id="zoomFit"
class="btn icon"
title="Fit page"
data-i18n-title="tools:editPdfText.tipFitPage"
>
<i class="ph ph-frame-corners"></i>
</button>
</div>
<div class="vbcenter">
<button
id="prev"
class="btn icon"
title="Previous page"
data-i18n-title="tools:editPdfText.tipPreviousPage"
>
<i class="ph ph-caret-left"></i>
</button>
<span id="pageLabel" class="label">0 / 0</span>
<input
id="pageInput"
class="pagebox"
type="number"
min="1"
step="1"
title="Type a page number and press Enter"
data-i18n-title="tools:editPdfText.tipTypeAPageNumberAndPressEnter"
/>
<span id="pageTotal" class="label pagetotal">/ 0</span>
<button
id="next"
class="btn icon"
title="Next page"
data-i18n-title="tools:editPdfText.tipNextPage"
>
<i class="ph ph-caret-right"></i>
</button>
</div>
<div class="vbright">
<button
id="docInfoBtn"
class="btn icon"
title="Document properties"
data-i18n-title="tools:editPdfText.tipDocumentProperties"
>
<i class="ph ph-info"></i>
</button>
<button
id="vbCollapse"
class="btn icon"
title="Hide bar"
data-i18n-title="tools:editPdfText.tipHideBar"
>
<i class="ph ph-caret-double-down"></i>
</button>
</div>
</div>
<button
id="vbRestore"
class="btn icon"
hidden
title="Show bar"
data-i18n-title="tools:editPdfText.tipShowBar"
>
<i class="ph ph-caret-double-up"></i>
</button>
<div id="toast" hidden></div>
</div>
<div
id="loader-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
>
<div
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p
id="loader-text"
class="text-white text-lg font-medium"
data-i18n="loader.processing"
>
Processing...
</p>
</div>
</div>
<div
id="alert-modal"
class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
>
<div
class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
>
<h3
id="alert-title"
class="text-xl font-bold text-white mb-2"
data-i18n="alert.title"
>
Alert
</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button
id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="alert.ok"
>
OK
</button>
</div>
</div>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/js/logic/edit-pdf-text-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Edit PDF Text - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
</body>
</html>