Text-to-Handwriting
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-125454191-4"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-125454191-4');
    </script>

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Basic -->
    <meta charset="UTF-8" />
    <meta name="theme-color" content="#09f" />
    <meta
      name="description"
      content="I hate writing assignments so I made this tool that converts text to an image that looks like handwriting. You can copy paste text content into the textbox and click generate image button to generate image. Text to Handwriting"
    />
    <meta
      name="keywords"
      content="text to handwriting, text-to-handwrting, saurabh text to handwriting, convert text to image, write assignment online"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="author" content="Saurabh Daware" />
    <meta name="copyright" content="Saurabh Daware" />
    <meta name="robots" content="follow" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Text to Handwriting" />
    <meta
      property="og:url"
      content="https://saurabhdaware.github.io/text-to-handwriting"
    />
    <meta
      property="og:description"
      content="I hate writing assignments so I made this tool that converts text to an image that looks like handwriting. You can copy paste text content into the textbox and click generate image button to generate image. Text to Handwriting"
    />
    <meta property="og:site_name" content="Text to Handwriting" />

    <meta
      property="og:image:secure_url"
      itemprop="image"
      content="https://res.cloudinary.com/saurabhdaware/image/upload/v1585413874/saurabh2019/projects/text-to-handwriting.png"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="https://res.cloudinary.com/saurabhdaware/image/upload/v1585413874/saurabh2019/projects/text-to-handwriting.png"
    />
    <meta property="og:image:width" content="600" />
    <meta property="og:image:height" content="337" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@saurabhcodes" />

    <title>Text to Handwriting</title>

    <!-- Favicons -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="images/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="images/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="images/favicon-16x16.png"
    />

    <!-- PWA Migration -->
    <link rel="manifest" href="./manifest.webmanifest" />

    <!-- Load Fonts -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Homemade+Apple|Roboto|Caveat|Liu+Jian+Mao+Cao&display=swap"
    />

    <!-- CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/features.css" />
  </head>

  <body>
    <main>
      <button
        aria-label="Activate Dark Mode"
        title="Toggle Dark Mode"
        aria-pressed="false"
        onclick="toggleTheme(this)"
        class="dark-mode-toggle"
      >
        <span class="sun">
          <img
            alt="sun icon that represents light mode"
            width="35px"
            src="images/sun.svg"
        /></span>
        <span class="moon"
          ><img
            alt="moon icon to represent dark mode "
            width="25px"
            src="images/moon.svg"
        /></span>
      </button>
      <h1>Text to Handwriting</h1>
      <section class="generate-image-section">
        <br /><br />
        <form id="generate-image-form">
          <!-- Generate Image Section -->
          <div class="display-flex output-grid responsive-flex">
            <div class="flex-1 page-container-super">
              <div>
                <h2 style="margin-top: 0px;">Input</h2>
                <label class="block" for="note">Type/Paste text here</label>
              </div>

              <div class="flex-1 page-container">
                <div class="page-a margined lines">
                  <div contenteditable="true" class="top-margin"></div>
                  <div class="display-flex left-margin-and-content">
                    <div contenteditable="true" class="left-margin"></div>
                    <div class="paper-content" id="note" contenteditable="true">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Ut rhoncus dui eget tortor feugiat iaculis. Morbi et dolor
                      in felis viverra efficitur. Integer id laoreet arcu.
                      Mauris turpis nibh, scelerisque sed tristique non,
                      hendrerit in erat. Duis interdum nisl risus, ac ultrices
                      ipsum auctor at. Aliquam faucibus iaculis metus sit amet
                      tincidunt. Vestibulum cursus urna vel nunc imperdiet
                      suscipit. Ut eu augue egestas, porta orci lobortis,
                      pharetra orci. Morbi eu tellus quis nisi tempor accumsan
                      nec eu urna. empor, ullamcorper tortor. Mauris quis
                      fermentum augue. Phasellus ac nisl hendrerit, fringilla
                      enim aliquam, placerat odio. Ut tortor nisi, pellentesque
                      sed nisi at, hendrerit imperdiet turpis. Proin interdum
                      porttitor metus at hendrerit. Proin ipsum nisl, lacinia
                      vitae purus ullamcorper, maximus convallis sem. Sed nec
                      lacinia lorem. Duis arcu metus, cursus non odio quis,
                      tincidunt tempor augue. Donec eget vestibulum risus.
                      Nullam blandit quis est vitae feugiat.
                    </div>
                  </div>
                  <div class="overlay"></div>
                </div>
                <br />
              </div>

              <div>
                <button
                  id="draw-diagram-button"
                  type="button"
                  style="font-size: 0.9rem; margin-top: 5px;"
                  class="draw-button"
                >
                  Draw <small>(Beta)</small>
                </button>
              </div>
            </div>

            <div class="customization-col">
              <!-- Handwriting Font -->
              <div style="padding: 5px 0px 5px 0px;">
                <b>Customizations</b> <small>(Optional)</small>
                <p style="font-size: 0.8rem;">
                  <em
                    >Note: Few changes may reflect only in the generated image
                    and not in the preview</em
                  >
                </p>
              </div>
              <fieldset>
                <legend>Handwriting Options</legend>

                <div class="category-grid">
                  <div>
                    <label class="block" for="handwriting-font"
                      >Handwriting Font</label
                    >
                    <select id="handwriting-font">
                      <option
                        selected
                        style="font-family: 'Homemade Apple';"
                        value="'Homemade Apple', cursive"
                      >
                        Homemade Apple
                      </option>
                      <option value="Hindi_Font">Kruti-dev(Hindi)</option>
                      <option
                        style="font-family: 'Caveat', cursive; font-size: 13pt;"
                        value="'Caveat', cursive"
                      >
                        Caveat
                      </option>
                      <option
                        style="
                          font-family: 'Liu Jian Mao Cao';
                          font-size: 13pt;
                        "
                        value="'Liu Jian Mao Cao', cursive"
                      >
                        Liu Jian Mao Cao
                      </option>
                    </select>
                  </div>
                  <div class="upload-handwriting-container">
                    <label class="block" for="font-file"
                      >Upload your handwriting font <small>(Beta)</small>&nbsp;
                      <a
                        style="font-size: 1.1rem;"
                        title="How to add your own handwriting"
                        href="#how-to-add-handwriting"
                      >
                        &#9432;
                      </a>
                    </label>
                    <input accept=".ttf, .otf" type="file" id="font-file" />
                  </div>
                </div>
              </fieldset>

              <!-- Pen ink color, Font size, Vertical position text, Word Spacing -->
              <fieldset>
                <legend>Page & Text Options</legend>

                <div class="category-grid">
                  <div class="postfix-input" data-postfix="pt">
                    <label for="font-size">Font Size</label>
                    <input
                      id="font-size"
                      min="0"
                      step="0.5"
                      value="10"
                      type="number"
                    />
                  </div>
                  <div>
                    <label class="block" for="ink-color">Ink Color</label>
                    <select id="ink-color">
                      <option default value="#000f55">Blue</option>
                      <option value="black">Black</option>
                      <option value="#ba3807">Red</option>
                    </select>
                  </div>
                  <div>
                    <label class="block" for="page-size">Page Size</label>
                    <select id="page-size">
                      <option default value="a4">A4 &nbsp;</option>
                    </select>
                  </div>
                  <div>
                    <label class="block" for="page-effects">Effects</label>
                    <select id="page-effects">
                      <option default value="shadows">Shadows</option>
                      <option value="scanner">Scanner</option>
                      <option value="no-effect">No Effect</option>
                    </select>
                  </div>
                  <div>
                    <label class="block" for="resolution">Resolution</label>
                    <select id="resolution">
                      <option value="0.8">Very Low</option>
                      <option value="1">Low</option>
                      <option selected value="2">Normal</option>
                      <option value="3">High</option>
                      <option value="4">Very High</option>
                    </select>
                  </div>
                </div>
              </fieldset>

              <fieldset>
                <legend>Spacing Options</legend>

                <div class="category-grid">
                  <div class="postfix-input" data-postfix="px">
                    <label for="top-padding">Vertical Position</label>
                    <input id="top-padding" min="0" value="5" type="number" />
                  </div>
                  <div class="postfix-input" data-postfix="px">
                    <label for="word-spacing">Word Spacing</label>
                    <input
                      id="word-spacing"
                      min="0"
                      max="100"
                      value="0"
                      type="number"
                    />
                  </div>
                  <div class="postfix-input" data-postfix="pt">
                    <label for="letter-spacing">Letter Spacing</label>
                    <input
                      id="letter-spacing"
                      min="-5"
                      max="40"
                      value="0"
                      type="number"
                    />
                  </div>
                </div>
              </fieldset>

              <!-- Letter spacing, Paper Margin, Paper Lines, Paper Curvature -->
              <fieldset>
                <legend>Margin & Line Options</legend>

                <div class="category-grid">
                  <div>
                    <label for="paper-margin-toggle"
                      >Paper Margin:
                      <span aria-label="paper margin status" class="status"
                        >on</span
                      >
                    </label>
                    <label class="switch-toggle outer">
                      <input
                        aria-checked="true"
                        checked
                        aria-label="Paper Margin Button"
                        id="paper-margin-toggle"
                        type="checkbox"
                      />
                      <div></div>
                    </label>
                  </div>

                  <div>
                    <label for="paper-line-toggle"
                      >Paper Lines:
                      <span aria-label="paper line status" class="status"
                        >on</span
                      >
                    </label>
                    <label class="switch-toggle outer">
                      <input
                        aria-checked="true"
                        checked
                        aria-label="Paper Line Button"
                        id="paper-line-toggle"
                        type="checkbox"
                      />
                      <div></div>
                    </label>
                  </div>
                  <div class="experimental">
                    <!-- Removed option -->
                    <div class="upload-paper-container">
                      <label class="block" for="paper-file"
                        >Upload Paper Image as Background</label
                      >
                      <input
                        accept=".jpg, .jpeg, .png"
                        type="file"
                        id="paper-file"
                      />
                    </div>
                  </div>
                </div>
              </fieldset>

              <!-- GENERATE IMAGE BUTTONS -->
              <hr
                style="
                  border: 0.3px solid var(--elevation-background);
                  width: 80%;
                "
              />
              <div style="text-align: center; padding: 30px 0px;">
                <button
                  type="submit"
                  data-testid="generate-image-button"
                  class="button generate-image-button"
                >
                  Generate Image
                </button>
              </div>
            </div>
          </div>
        </form>
      </section>

      <!-- OUTPUT -->
      <section>
        <h2 id="output-header">Output</h2>
        <div id="output" class="output" style="text-align: center;">
          Click "Generate Image" Button to generate new image.
        </div>
        <div style="text-align: center; padding: 30px;">
          <button class="imp-button" id="download-as-pdf-button">
            Download All Images as PDF
          </button>
          <button class="delete-button" id="delete-all-button">
            Clear all images
          </button>
        </div>
      </section>

      <section id="how-to-add-handwriting">
        <h2>🤓 Guide to add your own handwriting</h2>
        <div>
          <ul>
            <li>
              To use your handwriting, you will have to generate font of your
              handwriting.
            </li>
            <li>
              There are websites like
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.calligraphr.com/en/"
                >Calligraphr</a
              >
              that let you do that.
            </li>
            <li>
              Once you get .ttf file of your handwriting, upload it from 'Upload
              your handwriting font' button in customizations sections
            </li>
          </ul>
        </div>
      </section>

      <section id="sponsors">
        <h2>🤗 Sponsors</h2>
        <p>
          This tool is completely free and neither stores any of your data for
          money so maybe you can consider being patron or making an one time
          payment with buy me a coffee to help the creator 🤗
        </p>
        <p>
          <a href="https://www.patreon.com/bePatron?u=31891872">
            <img
              loading="lazy"
              style="border-radius: 4px;"
              alt="Buy me a Coffee Button"
              width="200"
              src="https://c5.patreon.com/external/logo/become_a_patron_button.png"
            />
          </a>
          &nbsp;
          <a href="https://www.buymeacoffee.com/saurabhdaware">
            <img
              loading="lazy"
              style="border-radius: 4px;"
              alt="Buy me a Coffee Button"
              width="200"
              src="https://cdn.buymeacoffee.com/buttons/default-yellow.png"
            />
          </a>
        </p>
      </section>

      <section id="github-contributors">
        <h2>👫 GitHub Contributors</h2>
        <div class="project-contributors" id="project-contributors"></div>
      </section>

      <section id="faq">
        <h2>❓ FAQs (Frequently Asked Questions)</h2>
        <div>
          <h3>1. How can I add my own Handwriting?</h3>
          <p>
            Check out
            <a href="#how-to-add-handwriting"
              >Guide to add your own Handwriting</a
            >
          </p>
        </div>
        <div>
          <h3>2. Where can I get more fonts?</h3>
          <p>
            You can use fonts from
            <a
              href="https://www.quantumenterprises.co.uk/handwriting-fonts/fontvault.htm"
              >https://www.quantumenterprises.co.uk/handwriting-fonts/fontvault.htm</a
            >
          </p>
        </div>
        <div>
          <h3>3. There are gaps between letters in custom fonts</h3>
          <p>
            This is a known issue that we haven't figured out the solution for.
            As a temporary workaround, there is letter spacing and word spacing
            option to adjust the gap.
          </p>
        </div>
        <div>
          <h3>4. Where can I request for features and report bugs?</h3>
          <p>
            You can't. This is a read-only project and there will not be any
            improvements in the project
          </p>
        </div>
      </section>
    </main>
    <footer style="padding: 40px 0px 10px 0px;">
      Thank you for using Text to Handwriting! You can follow me on
      <a href="https://twitter.com/saurabhcodes">Twitter @saurabhcodes</a>
      <br /><br />Do star the
      <a href="https://github.com/saurabhdaware/text-to-handwriting"
        >Text-to-Handwriting GitHub Repository</a
      >
      and If you're using it for writing assignments, make sure you use it at
      your own risk and If it fails and your teacher finds this tool, ask them
      to star my GitHub as well :D <br />
      <br />byeeee! <br /><br />
      ~ Saurabh (<a href="https://saurabhdaware.in">https://saurabhdaware.in</a
      >)
    </footer>

    <!-- Fixed Elements -->
    <section class="draw-container popup-container">
      <button class="close-button">&times;</button>
      <div class="display-flex responsive-flex">
        <canvas
          id="diagram-canvas"
          style="background-color: #fff;"
          height="300px"
          width="600px"
        ></canvas>
        <div class="flex-1 buttons-container padding-around">
          <button
            id="add-to-paper-button"
            style="margin-top: 5px; margin-bottom: 5px;"
          >
            Add to Paper
          </button>
          <button
            id="draw-download-button"
            style="margin-top: 5px; margin-bottom: 5px;"
          >
            Download Image
          </button>
          <br /><br />
          <input
            type="file"
            id="image-to-add-in-canvas"
            accept="image/x-png,image/jpeg"
            hidden="hidden"
          />
          <br /><br /><button id="add-new-image-button">Add bg image</button>
          <br /><br />
          <button
            id="clear-draw-canvas"
            class="blue-button"
            style="background-color: #f30; color: #fff;"
          >
            Clear Canvas
          </button>
        </div>
      </div>
    </section>
    <!-- GitHub Corner logo -->
    <a
      tabindex="0"
      href="https://github.com/saurabhdaware/text-to-handwriting"
      rel="noopener noreferrer"
      target="_blank"
      class="github-corner"
      aria-label="View source on GitHub"
    >
      <svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style="
          fill: #151513;
          color: #fff;
          position: absolute;
          top: 0;
          border: 0;
          right: 0;
        "
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px;"
          class="octo-arm"
        ></path>
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          class="octo-body"
        ></path>
      </svg>
    </a>

    <script
      src="./js/vendors/html2canvas.min.js"
      crossorigin="anonymous"
    ></script>
    <script type="module" src="js/app.mjs"></script>
    <script defer src="https://unpkg.com/jspdf@^1/dist/jspdf.min.js"></script>
    <script>
      function toggleTheme(toggleButton) {
        if (document.body.classList.contains('dark')) {
          document.body.classList.add('fade-in-light');
          document.body.classList.remove('dark');
          document.body.classList.remove('fade-in-dark');
          window.localStorage.setItem('prefers-theme', 'light');
          if (toggleButton) {
            toggleButton.setAttribute('aria-pressed', false);
            toggleButton.setAttribute('aria-label', 'Activate Dark Mode');
          }
        } else {
          document.body.classList.add('fade-in-dark');
          document.body.classList.add('dark');
          document.body.classList.remove('fade-in-light');
          window.localStorage.setItem('prefers-theme', 'dark');
          if (toggleButton) {
            toggleButton.setAttribute('aria-pressed', true);
            toggleButton.setAttribute('aria-label', 'Activate Light Mode');
          }
        }
      }

      const localPreference = window.localStorage.getItem('prefers-theme');
      if (localPreference) {
        if (localPreference === 'light') document.body.classList.remove('dark');
        else document.body.classList.add('dark');
      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
      }

      document.querySelectorAll('#donations a[href]').forEach((anchorEl) => {
        anchorEl.addEventListener('click', (e) => {
          const tracker = ga.getAll()[0];
          let label;
          if (e.target.href) {
            label = e.target.href;
          } else {
            label = e.target.parentElement.href;
          }

          if (tracker) {
            tracker.send('event', 'Donation Link', 'Click', label);
          }
        });
      });
    </script>
  </body>
</html>