<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: arvin liu</title>
    <description>The latest articles on DEV Community by arvin liu (@arvin_liu_6258cd1ddcc08dc).</description>
    <link>https://dev.to/arvin_liu_6258cd1ddcc08dc</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4157424%2F2455003f-afb0-4e93-a36f-0d7afc720af8.jpg</url>
      <title>DEV Community: arvin liu</title>
      <link>https://dev.to/arvin_liu_6258cd1ddcc08dc</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/arvin_liu_6258cd1ddcc08dc"/>
    <language>en</language>
    <item>
      <title>A personal font and a handwritten page need different data models</title>
      <dc:creator>arvin liu</dc:creator>
      <pubDate>Tue, 13 Oct 2026 10:38:28 +0000</pubDate>
      <link>https://dev.to/arvin_liu_6258cd1ddcc08dc/a-personal-font-and-a-handwritten-page-need-different-data-models-n9i</link>
      <guid>https://dev.to/arvin_liu_6258cd1ddcc08dc/a-personal-font-and-a-handwritten-page-need-different-data-models-n9i</guid>
      <description>&lt;p&gt;Disclosure: This article was generated by AI for the team behind Handwriting AI and FontKind AI. The schema below is an illustrative design example, not a description of either product's internal API.&lt;/p&gt;

&lt;p&gt;A handwriting workflow can produce two very different artifacts: a reusable font and a finished page. Both may look like handwriting, but they solve different problems. Treating them as one export creates confusing interfaces, misleading descriptions, and brittle integrations.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with the artifact
&lt;/h2&gt;

&lt;p&gt;A TTF font describes glyphs and the metrics used to arrange them. It does not contain the final letter, card, worksheet, or PDF. A page combines text, a font, spacing, paper dimensions, and layout. Changing the message should not require rebuilding the font; changing the font should not silently overwrite the page settings.&lt;/p&gt;

&lt;p&gt;This distinction suggests two separate records:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;FontAsset&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;format&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ttf&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;characterSet&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;source&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;handwriting-photo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;description&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;style-image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;PageDocument&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;fontAssetId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;paper&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A4&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Letter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pdf&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;jpeg&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These types deliberately omit authentication, billing, and storage details. Their purpose is to make the boundary visible: the page references a font asset rather than pretending the font is a page.&lt;/p&gt;

&lt;h2&gt;
  
  
  Record what came from the handwriting sample
&lt;/h2&gt;

&lt;p&gt;A photograph rarely contains every character a reusable font needs. If a missing character is generated in a similar style, it should not be described as a direct restoration of the writer's original letter.&lt;/p&gt;

&lt;p&gt;Keep that distinction at character level. A simple provenance value can distinguish a restored character from a style completion. File paths, character counts, and download formats can come from deterministic code. Whether a shape faithfully represents the photographed letter requires comparison with the source. A complete character set alone does not prove visual fidelity.&lt;/p&gt;

&lt;h2&gt;
  
  
  Test the font and the page separately
&lt;/h2&gt;

&lt;p&gt;For the font, check actual character coverage, legibility, spacing, and the result when unfamiliar words are typed. Include capitals, digits, and punctuation. Compare restored characters with the source at a readable size.&lt;/p&gt;

&lt;p&gt;For the page, check wrapping, clipping, margins, paper size, and print output. A glyph that looks good in a large preview can still create an awkward line break. Conversely, a clipped PDF does not necessarily mean the underlying glyph needs regeneration.&lt;/p&gt;

&lt;p&gt;Keep these failures separate in bug reports. "The lowercase g differs from the source" points to font creation. "The last line crosses the print margin" points to page layout. That separation makes a fix easier to evaluate.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make the product boundary visible
&lt;/h2&gt;

&lt;p&gt;In our products, &lt;a href="https://font.handwriting-ai.com" rel="noopener noreferrer"&gt;FontKind AI&lt;/a&gt; handles font creation from a clear handwriting photo, a text description, or a style reference image. It provides text previews and TTF download. Current output covers 95 ASCII characters: English uppercase and lowercase letters, digits, punctuation, and space. Photo-based results distinguish restored characters from style completions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://handwriting-ai.com" rel="noopener noreferrer"&gt;Handwriting AI&lt;/a&gt; handles handwritten pages and printable handwriting, cursive, tracing, and spelling worksheets. Users adjust paper, ink, spacing, and layout and export page files. FontKind AI has its own credits and subscription. Previewing already linked personal fonts on Handwriting AI is free; exporting or printing pages with them requires Starter or higher.&lt;/p&gt;

&lt;p&gt;The practical interface rule is simple: name the artifact before asking someone to export it. Use "Download TTF" for a font and "Export PDF" for a page. Show character coverage beside the font, and paper size beside the document. These details tell users what they are getting and give developers a clear place to investigate when something goes wrong.&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
    <item>
      <title>When an AI handwriting font needs a second look</title>
      <dc:creator>arvin liu</dc:creator>
      <pubDate>Sat, 03 Oct 2026 02:52:11 +0000</pubDate>
      <link>https://dev.to/arvin_liu_6258cd1ddcc08dc/when-an-ai-handwriting-font-needs-a-second-look-20ll</link>
      <guid>https://dev.to/arvin_liu_6258cd1ddcc08dc/when-an-ai-handwriting-font-needs-a-second-look-20ll</guid>
      <description>&lt;p&gt;The most useful detail in this notebook example is a rejected change.&lt;/p&gt;

&lt;p&gt;Look at the lowercase x in the review below. The first shape is a plain crossed stroke. Its proposed replacement picks up a hook. The label says REJECTED. The tion group also keeps its first version. Six other candidates stay.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fb56q8d6au6w1zrpwdsq3.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fb56q8d6au6w1zrpwdsq3.webp" alt="Original notebook, first font draft, and reviewed result" width="800" height="718"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The same notebook heading, “Maxwell Boltzmann distribution,” appears at each stage. The small sentence crop is for comparison; the wider handwriting sample supplied the style evidence.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Read the word before the glyph
&lt;/h2&gt;

&lt;p&gt;A large character preview is useful for seeing a stroke. It can also make a small difference feel more important than it is. Put the candidate back in the sentence before deciding whether to keep it.&lt;/p&gt;

&lt;p&gt;In this case, the revised M and B visibly change the word silhouette. The double-l group becomes more restrained. The final sentence still keeps the original x and tion shapes. It is a mix of accepted changes and earlier glyphs, rather than an entirely regenerated line.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F96prearp63hxzpyls7e5.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F96prearp63hxzpyls7e5.webp" alt="Eight glyph comparisons, including the rejected x and tion" width="799" height="310"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Original review decisions from the Handwriting AI case. Six accepted candidates out of eight is a description of this example, not an accuracy benchmark.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Keep the source in the comparison
&lt;/h2&gt;

&lt;p&gt;Use the same sentence, at a readable size, beside its photographed source. Changing the sentence adds another variable: now a different set of letters can make one version seem better.&lt;/p&gt;

&lt;p&gt;After the source comparison, try unfamiliar words. A font has to handle text the notebook never contained. Include capitals, numbers, and punctuation in that second check.&lt;/p&gt;

&lt;p&gt;The basic font draft predicts characters missing from the photo. Those predictions deserve their own review; a shape can fit the overall style without being something the writer actually supplied.&lt;/p&gt;

&lt;h2&gt;
  
  
  Give a rejected change a place in the case study
&lt;/h2&gt;

&lt;p&gt;A tidy before-and-after image usually hides the decisions in between. Here the rejected candidates explain the finished result. Someone repeating the workflow can see why keeping an earlier shape is a reasonable outcome.&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://handwriting-ai.com/guides/how-to-turn-your-handwriting-into-a-font" rel="noopener noreferrer"&gt;complete notebook case&lt;/a&gt; includes the source photo, crop examples, and review sequence. Free accounts can create and preview one font; downloading pages with it requires Starter or higher, and TTF export requires Pro or Premium.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclosure: Published for Handwriting AI with AI-generated text. The images and observations refer to our existing public product case.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>design</category>
    </item>
    <item>
      <title>Designing printable handwriting worksheets that survive PDF export</title>
      <dc:creator>arvin liu</dc:creator>
      <pubDate>Fri, 02 Oct 2026 12:34:49 +0000</pubDate>
      <link>https://dev.to/arvin_liu_6258cd1ddcc08dc/designing-printable-handwriting-worksheets-that-survive-pdf-export-3ao1</link>
      <guid>https://dev.to/arvin_liu_6258cd1ddcc08dc/designing-printable-handwriting-worksheets-that-survive-pdf-export-3ao1</guid>
      <description>&lt;p&gt;A worksheet that looks good on screen can fail on paper. These checks help keep handwriting practice sheets readable after PDF export.&lt;/p&gt;

&lt;h2&gt;
  
  
  Choose the paper size first
&lt;/h2&gt;

&lt;p&gt;Use A4 or US Letter before laying out content. Keep a safe area for printers that cannot print to the edge. Export the PDF and check its physical dimensions. Print at actual size so letters do not accidentally shrink.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wait for the right font
&lt;/h2&gt;

&lt;p&gt;A fallback font changes line wrapping and letter spacing. Wait for font loading before generating an export. Test both a short name and a long name. Include letters with ascenders and descenders to check line height.&lt;/p&gt;

&lt;h2&gt;
  
  
  Test guides in grayscale
&lt;/h2&gt;

&lt;p&gt;Tracing letters must remain visible without competing with pencil marks. A pale guide can disappear on paper. Print one sheet in grayscale and inspect the baselines and midlines. Leave a blank row for independent practice.&lt;/p&gt;

&lt;h2&gt;
  
  
  Handle long text explicitly
&lt;/h2&gt;

&lt;p&gt;Split long sentences across rows instead of shrinking the letters until they fit. Check the longest line for clipping. Use the font metrics to position guides rather than tuning the layout for one example word.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try a real worksheet
&lt;/h2&gt;

&lt;p&gt;Handwriting AI offers editable practice sheets for letters and names and sentences. Explore &lt;a href="////handwriting-ai.com"&gt;Handwriting AI&lt;/a&gt; for an example of this workflow. This post is shared on behalf of the product. Free worksheet tools are separate from paid personal-font functionality.&lt;/p&gt;

&lt;p&gt;This article was generated by an AI agent. It does not report a personal experiment or benchmark.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
