bentopdf/src/pages/fb2-to-pdf.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <meta
      name="title"
      content="FB2 to PDF Online Free - FB2 to PDF Tool | BentoPDF"
    />
    <meta
      name="description"
      content="Convert FictionBook (FB2) e-books to PDF format. Supports multiple files. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta name="keywords" content="fb2 to pdf, online pdf" />
    <meta name="author" content="BentoPDF" />
    <meta
      name="robots"
      content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
    />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.bentopdf.com/fb2-to-pdf" />

    <!-- Open Graph / Facebook / LinkedIn -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.bentopdf.com/fb2-to-pdf" />
    <meta
      property="og:title"
      content="FB2 to PDF Online Free - FB2 to PDF Tool | BentoPDF"
    />
    <meta
      property="og:description"
      content="Convert FictionBook (FB2) e-books to PDF format. Supports multiple files. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      property="og:image"
      content="https://www.bentopdf.com/images/og-fb2-to-pdf.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="BentoPDF" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://www.bentopdf.com/fb2-to-pdf" />
    <meta name="twitter:title" content="FB2 to PDF Free" />
    <meta
      name="twitter:description"
      content="Convert FictionBook (FB2) e-books to PDF format. Supports multiple files. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      name="twitter:image"
      content="https://www.bentopdf.com/images/twitter-fb2-to-pdf.png"
    />
    <meta name="twitter:site" content="@BentoPDF" />

    <!-- Mobile Web App -->
    <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="FB2 to PDF" />

    <title>FB2 to PDF - Convert XPS/OFB2 to PDF - BentoPDF</title>

    <link href="/src/css/styles.css" rel="stylesheet" />

    <!-- Web App Manifest -->
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Favicons -->
    <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-gray-200 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:fb2ToPdf.name"
        >
          FB2 to PDF
        </h1>
        <p class="text-gray-400 mb-6" data-i18n="tools:fb2ToPdf.subtitle">
          Convert FictionBook (FB2) e-books to PDF format. Supports multiple
          files.
        </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 files</span
              >
              <span data-i18n="upload.orDragAndDrop">or drag and drop</span>
            </p>
            <p
              class="text-xs text-gray-500"
              data-i18n="tools:fb2ToPdf.acceptedFormats"
            >
              FB2 files
            </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=".fb2,application/x-fictionbook+xml,text/xml"
            multiple
          />
        </div>

        <div id="file-controls" class="hidden mt-4 flex gap-3">
          <button
            id="add-more-btn"
            class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="plus"></i>
            <span data-i18n="upload.addMore">Add More Files</span>
          </button>
          <button
            id="clear-files-btn"
            class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="trash-2"></i>
            <span data-i18n="upload.clearAll">Clear All</span>
          </button>
        </div>

        <div id="file-display-area" class="mt-4 space-y-2"></div>

        <button
          id="process-btn"
          class="hidden btn-gradient w-full mt-6"
          data-i18n="tools:fb2ToPdf.convertButton"
        >
          Convert to PDF
        </button>
      </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">
          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"
        >
          OK
        </button>
      </div>
    </div>

    <!-- How It Works Section -->
    <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">Upload File</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step1">
              Click or drag and drop your file to begin
            </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">Process</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step2">
              Click the process button to start
            </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">Download</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step3">
              Save your processed file instantly
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Related Tools 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="merge-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">Merge PDF</h3>
          <p class="text-gray-400 text-sm">Free online merge PDF tool</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">Compress PDF</h3>
          <p class="text-gray-400 text-sm">Free online compress PDF tool</p>
        </a>
        <a
          href="split-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">Split PDF</h3>
          <p class="text-gray-400 text-sm">Free online split PDF tool</p>
        </a>
        <a
          href="edit-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">Edit PDF</h3>
          <p class="text-gray-400 text-sm">Free online edit PDF tool</p>
        </a>
        <a
          href="rotate-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">Rotate PDF</h3>
          <p class="text-gray-400 text-sm">Free online rotate PDF tool</p>
        </a>
      </div>
    </section>

    <!-- FAQ 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">
            What is an FB2 file?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            FB2 is the FictionBook 2 ebook format, an XML-based format that is
            common in Russia and Eastern Europe. It stores the book's text,
            chapter structure, and any embedded images in a single file, but
            many readers and phones outside that region can't open it, which is
            why converting to PDF helps.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Does the conversion keep chapters, formatting, and images?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Chapter breaks, basic text formatting, and images embedded in the
            FB2 file are all carried into the PDF. The PyMuPDF engine reads the
            XML structure directly, so nothing needs to be configured.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I convert an .fb2.zip file?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Not directly. The tool only accepts plain .fb2 files, so extract the
            archive first and upload the .fb2 inside it.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I convert several FB2 books at once?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Select or drop as many files as you like and click Convert to PDF. A
            single book downloads as a PDF with the same name, while several are
            packed into fb2-converted.zip with one PDF per book.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I change the page size or font before converting?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. There are no layout options in this converter; the engine
            paginates the book with its default page size and typography. If you
            need a different page size afterward, run the result through
            <a
              href="/fix-page-size"
              class="text-indigo-300 hover:text-indigo-400"
              >Fix Page Size</a
            >.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Will Russian or other Cyrillic text convert correctly?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            FB2 files are Unicode XML and the converter renders Unicode text, so
            Cyrillic books convert with their original characters intact. The
            text stays selectable and searchable in the PDF.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Is my ebook uploaded during conversion?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. The FB2 file is parsed and laid out by a PDF engine running in
            your browser, and only the finished PDF is saved to your device.
            Nothing is sent to a server, so the conversion also works for drafts
            and personal documents.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Why does the PDF have a different number of pages than my e-reader
            shows?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            FB2 is a reflowable format, so page counts depend on screen size and
            font settings in each reader. The PDF fixes the layout at conversion
            time, which usually produces a different, and now permanent, page
            count.
          </p>
        </details>
      </div>
    </section>
    {{> footer }}
    <script type="module" src="/src/js/utils/lucide-init.ts"></script>
    <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/fb2-to-pdf-page.ts"></script>
    <script type="module" src="/src/js/mobileMenu.ts"></script>
    <script type="module" src="/src/js/main.ts"></script>

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "FB2 to PDF - BentoPDF",
        "applicationCategory": "PDF Tool",
        "operatingSystem": "Any - Web Browser",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": "How to fb2 to pdf online",
        "description": "Learn how to fb2 to pdf using BentoPDF",
        "step": [
          {
            "@type": "HowToStep",
            "position": 1,
            "name": "Upload File",
            "text": "Click or drag and drop your file"
          },
          {
            "@type": "HowToStep",
            "position": 2,
            "name": "Process",
            "text": "Click the process button"
          },
          {
            "@type": "HowToStep",
            "position": 3,
            "name": "Download",
            "text": "Download your processed file"
          }
        ]
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.bentopdf.com"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "FB2 to PDF",
            "item": "https://www.bentopdf.com/fb2-to-pdf"
          }
        ]
      }
    </script>
  </body>
</html>