Skip to content

✨feat(web_tool): add pdf export; add borders, page number, header; fix rendering of long lines #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RomanPlusPlus wants to merge 1 commit into
base: main
Choose a base branch
from
Open

✨feat(web_tool): add pdf export; add borders, page number, header; fix rendering of long lines #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@ If you want to use the fonts in your text editor, you can find the TTF files in

But we recommend to render the images directly, to achieve the pixel-level quality. For this, you can use render_text.py in the tools dir, or our free [web tool](https://sideloading-research.github.io/extremely_small_font/).

## Running the Web Tool Locally

To try the web tool on your machine, start a local server from the `docs` directory:

```bash
cd docs
python -m http.server 8765
```

Then open http://localhost:8765 in your browser.

# Fonts

## The 5x5 Font
Expand Down
59 changes: 47 additions & 12 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,13 @@ <h1><span class="highlight">Extremely Small</span> Font Renderer</h1>
</button>
<button id="processFileBtn" class="primary-btn"
title="Render the uploaded file and download the result as PNG pages."
style="flex: 1; justify-content: center;"
style="flex: 1; justify-content: center; display: none;"
disabled>
Process & Download
</button>
</div>

<div id="progressContainer" class="progress-container" style="display: none; margin-top: 15px;">
<div class="progress-bar-bg">
<div id="progressBar" class="progress-bar"></div>
</div>
<div id="progressText" class="progress-text">Processing: 0%</div>
</div>

</div>

<div class="control-group">
Expand All @@ -68,7 +63,7 @@ <h1><span class="highlight">Extremely Small</span> Font Renderer</h1>
<div class="option-item"
title="Multiplier for each font pixel. Scale 1 = one screen pixel per font pixel; scale 2 = 2x2 block per font pixel.">
<label for="scale">Pixel Scale</label>
<input type="number" id="scale" min="1" max="10" value="2">
<input type="number" id="scale" min="1" max="10" value="3">
</div>
<div class="option-item"
title="Page margin in millimeters, applied to all four sides of the A4 output.">
Expand All @@ -78,12 +73,12 @@ <h1><span class="highlight">Extremely Small</span> Font Renderer</h1>
<div class="option-item"
title="Dots per inch. Higher values produce larger images with more text per page. 300 is standard for printing.">
<label for="dpi">DPI</label>
<input type="number" id="dpi" min="70" max="600" value="300" step="10">
<input type="number" id="dpi" min="70" max="600" value="600" step="10">
</div>
<div class="option-item"
title="Vertical gap between text lines in font pixels. 0 means lines touch; higher values add more spacing.">
<label for="lineGap">Line Gap (px)</label>
<input type="number" id="lineGap" min="0" max="10" value="1">
<input type="number" id="lineGap" min="0" max="10" value="2">
</div>
</div>

Expand Down Expand Up @@ -115,12 +110,51 @@ <h1><span class="highlight">Extremely Small</span> Font Renderer</h1>
<span class="slider"></span>
<span class="label-text">Include Legend</span>
</label>

<label class="toggle-switch"
title="Draw an elegant decorative border around each page using the margin space, giving an official document appearance.">
<input type="checkbox" id="addBorders" checked>
<span class="slider"></span>
<span class="label-text">Add Borders</span>
</label>

<label class="toggle-switch"
title="Show page numbers (e.g. 1/3) in the bottom right corner margin.">
<input type="checkbox" id="includePageNumbers" checked>
<span class="slider"></span>
<span class="label-text">Page Numbers</span>
</label>

<label class="toggle-switch"
title="Save the rendered output as a single PDF file instead of individual PNG images. The PDF preserves full image quality and is sized for A4 printing.">
<input type="checkbox" id="saveAsPdf">
<span class="slider"></span>
<span class="label-text">Save as PDF</span>
</label>

<label class="toggle-switch"
title="Add a header line at the top of the first page, rendered at 2x the current pixel scale.">
<input type="checkbox" id="includeHeader" checked>
<span class="slider"></span>
<span class="label-text">Include Header</span>
</label>
<div id="headerTextGroup" class="header-text-group">
<input type="text" id="headerText" value="IMPORTANT! PRESERVE THIS DOCUMENT.">
</div>
</div>
</section>

<section class="preview-panel">
<div class="preview-header">
<h2>Live Preview</h2>
<div id="previewHeaderStatus">
<h2 id="previewTitle">Live Preview</h2>
<div id="previewProgress" style="display: none; flex: 1;">
<div id="previewProgressText" class="progress-text" style="text-align: left; margin-bottom: 4px;">Processing...</div>
<div class="progress-bar-bg">
<div id="previewProgressBar" class="progress-bar"></div>
</div>
</div>
</div>
<div class="preview-actions">
<button id="downloadBtn" class="primary-btn"
title="Download the current preview as PNG image(s). Multi-page text produces one file per page.">
Expand All @@ -131,7 +165,7 @@ <h2>Live Preview</h2>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
Download PNG
<span id="downloadBtnLabel">Download this page</span>
</button>
</div>
</div>
Expand All @@ -149,6 +183,7 @@ <h2>Live Preview</h2>
</div>

<!-- Hidden element to fetch character_legend.txt text -->
<script src="pdf-lib.min.js"></script>
<script src="script.js"></script>
</body>

Expand Down
16 changes: 16 additions & 0 deletions docs/pdf-lib.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading