DEV Community: leo

Fixing TikTok's 7.3% Profile Sticker Grid Gap with Client-Side Canvas & WebCodecs

leo — Sat, 24 Oct 2026 12:06:26 +0000

When building profile aesthetics on social platforms, creators often run into a frustrating quirk with TikTok's sticker grid feature.

If you take an image, crop it into a standard 3x3 grid (like PineTools or traditional photo splitters do), and upload them as stickers, the resulting profile wall looks broken. The alignment drifts noticeably across tiles.

Here's why that happens, the mathematical fix, and how to implement it entirely inside the browser using standard Canvas and WebCodecs APIs.

The Root Cause: TikTok's 7.3% Spacing Gap

Unlike Instagram's uniform profile grid, TikTok injects subtle spacing between adjacent sticker items. Specifically, horizontal and vertical gaps account for approximately 7.3% of each tile dimension.

When you slice an image with 0% gap assumptions:

The tiles do not touch edge-to-edge.
Visual lines, text, and circular subjects shift out of sync across columns and rows.

To achieve a seamless visual aesthetic, the generator must anticipate this built-in separation and apply inverse offset compensation during slicing.

Calculating Gap-Aware Dimensions

Instead of dividing total width simply as W / cols, each tile's sampled bounding box in the source image must account for the display ratio with inter-tile margins:

function calculateSlices(sourceWidth, sourceHeight, cols = 3, rows = 3, gapPercent = 0.073) {
  const totalGapWidth = (cols - 1) * gapPercent;
  const unitWidth = sourceWidth / (cols + totalGapWidth);
  const gapSizeX = unitWidth * gapPercent;

  const slices = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const sx = c * (unitWidth + gapSizeX);
      const sy = r * (unitWidth + gapSizeX);
      slices.push({ x: sx, y: sy, width: unitWidth, height: unitWidth });
    }
  }
  return slices;
}

Client-Side Processing Without Cloud Latency

TikTok requires stickers to be created from short video clips or animated formats (720x720, up to 3 seconds). Sending heavy video uploads to a backend server introduces bandwidth costs, latency, and unnecessary privacy concerns.

By running the entire pipeline inside the browser:

An OffscreenCanvas extracts frame regions at the target 720x720 square format.
The WebCodecs API encodes raw frames directly into an H.264 MP4 stream.
Users download clean, sequential files (1 to 9) numbered in reverse upload order (because TikTok renders the newest upload at top-left).

You can test this algorithm live on the open tool TikTok StickerBanner Maker, completely free and client-side.

Key Takeaways for Frontend Engineers

Understand host-app quirks: Native mobile apps often render web-view or native grids with non-zero internal margins. Reverse-engineering those constraints yields a much better user experience.
Leverage modern browser APIs: Tasks that previously required heavy FFmpeg backend clusters can now be delegated entirely to the user's local hardware via WebCodecs and Canvas.

Why Legacy Wingdings Fonts Break on Mobile & How to Map Them to Unicode

leo — Sat, 17 Oct 2026 12:09:12 +0000

If you have ever attempted to render classic dingbat symbols—like those from Microsoft's iconic Wingdings (1, 2, 3) or Webdings font families—on a modern web page or mobile device, you have likely run into an annoying problem: instead of visual icons, users see ordinary Latin characters like A, B, or J.

In this short deep-dive, let's explore why this happens and how modern Unicode mapping provides a clean, zero-dependency solution.

1. The Historical Root Cause: ASCII Remapping

Back in the early 1990s (Windows 3.1 era), standard character encodings were largely 8-bit, and the Unicode consortium was still in its infancy. Microsoft created Wingdings by taking a standard TrueType font and replacing the visual glyphs of standard ASCII byte values (0x20 through 0x7E) with custom icons.

For example:

In standard fonts, byte 0x4A corresponds to capital letter J.
In Wingdings 1, byte 0x4A rendered as a smiley face (☺).

This worked inside local desktop software (like Word or PowerPoint) because the system applied the proprietary Wingdings.ttf font to that text run.

2. Why It Breaks on the Modern Web

On modern smartphones (iOS, Android), Linux distributions, and communication apps (Discord, Slack, Teams), two things prevent legacy Wingdings from working:

Missing System Fonts: Mobile OSes do not bundle licensed Microsoft symbol fonts.
Strict Unicode Semantics: Modern browsers and text renderers treat 0x4A as Unicode character U+004A (Latin Capital Letter J). When the requested font is missing, the fallback engine displays J, completely destroying the intended iconography.

3. The Modern Solution: Unicode & Emoji Mapping

The only cross-platform method to represent these characters reliably is to map each dingbat to its true standard Unicode equivalent point or modern universal emoji. For instance:

Pointing Hand Right: 👉 (U+1F449) or ☞ (U+261E)
Envelope / Mail: ✉ (U+2709)
Peace / Victory: ✌ (U+270C)
Skull & Crossbones: ☠ (U+2620)

4. Useful Online Utility & Reference

If you need an instant, client-side tool to convert between English text, Wingdings (1, 2, 3, and Webdings), and modern Unicode emojis without installing fonts or sending data to a remote server, check out Wingdings Translator & Decoder.

Key features that make it especially handy for web developers and puzzle creators:

Bidirectional translation: Convert text to symbols or decode symbol strings back into English.
Emoji Fallback Mode: Generates standard Unicode emojis that render identically on iOS, Android, macOS, and Windows.
Easter Egg Support: Includes a dedicated CRT scanline mode tailored for Undertale fans decoding W.D. Gaster's lore.
Zero Server Storage: Everything runs client-side in Vanilla JS.

5. Summary Cheat Sheet

Font Family	Typical Symbol Categories	Common Use Case
Wingdings 1	Hand gestures, envelopes, zodiac signs, stars	UI markers, retro puzzles
Wingdings 2	Circled digits, math symbols, checkmarks	Lists, validation status
Wingdings 3	Comprehensive navigation and technical arrows	Flowcharts, directional cues
Webdings	Transportation, weather, computing hardware	Early web iconography

Whenever you need legacy dingbats in your project, always convert to standard Unicode code points to ensure every user gets the exact experience you intended.

Free Tools for Generating Custom Vectors and Street-Style Typography

leo — Sat, 17 Oct 2026 07:44:54 +0000

When working on streetwear designs, game UI assets, creative posters, or stylized web graphics, standard typography libraries often feel too rigid. Achieving authentic graffiti and street lettering usually requires either hunting down obscure display fonts or manually tracing letterforms in Illustrator.

Here is a quick overview of four free, accessible tools that simplify working with urban typography and custom vector letterforms:

1. DaFont (Graffiti Section)

DaFont remains the classic archive for free-for-personal-use font files. If you need downloadable TTF or OTF files to install locally in Figma or Photoshop, its graffiti category contains hundreds of styles ranging from bubble letters to marker tags. The main tradeoff is licensing: many fonts are restricted to non-commercial use, and you have to handle letter kerning and outlines manually in your design software.

2. Graffitizer

If you need immediate custom lettering without downloading font files or installing desktop software, Graffitizer is a browser-based lettering studio. It focuses on three core graffiti styles: rounded Bubble letters, handwritten marker Tags, and interlocking Wildstyle designs.

What sets it apart from static font previewers is letter-level control: you can customize the rotation, scale, color, and positioning of each individual letter on the canvas rather than being constrained to a fixed text string. Once configured, you can export your artwork directly as a high-resolution transparent PNG or clean scalable SVG paths, making it easy to import into Figma or vector editing tools without signing up.

3. Calligraphr

For designers who want to turn their own real-world hand-drawn graffiti tags or sketches into a functional font family, Calligraphr is one of the best free options. You print or fill out a digital character template, draw your alphabet, and upload it back to generate an actual font file with custom baseline and ligature support.

4. Method Draw (Vector Web Editor)

Once you have your text exported as SVG, you often need to combine it with other graphic elements. Method Draw is a lightweight, open-source in-browser SVG editor that requires no account. It lets you tweak paths, group vector elements, and adjust fills directly in the browser before exporting to production assets.

Do you have any go-to tools or workflow tips for creating street-art typography in digital design? Feel free to share in the comments.

I Built Graffitizer — A Free Browser-Based Graffiti Lettering Studio with SVG & Transparent PNG Export (No AI, No Signup)

leo — Fri, 16 Oct 2026 08:12:52 +0000

If you have ever tried to create custom street-art lettering or a stylized wordmark for a poster, sticker, avatar, or side-project logo, you usually run into two frustrating extremes:

Static .ttf graffiti fonts feel robotic. Standard font files lock every character onto a rigid horizontal baseline with uniform kerning. Worse, repeated letters look identical, and you cannot easily tilt a single glyph, scale up the first letter, or control how thick outlines overlap without converting text to outlines in desktop vector software first.
AI image generators are a black box for typography. Prompt-based generators create cool raster scenes, but they still struggle with exact character spelling, bake the background into the pixels, and give you zero control when you simply want to nudge the third letter up by 10px or export clean vector <path> geometry.

That gap is why I built Graffitizer — a free, browser-based graffiti lettering studio designed to bridge the gap between a quick font generator and a full vector editor.

👉 Try it live here: https://www.graffitizer.com/ (Free to use, no account required, no watermarks)

Why Deterministic Presets + Per-Letter Manipulation Beat Prompts

Instead of generating flat raster images from AI prompts, Graffitizer uses deterministic font shapes paired with layered style presets that you can manipulate directly on an interactive canvas.

When you type a name, nickname, or short phrase (up to 20 characters, supporting English letters, numbers, supported punctuation, and Chinese characters), the studio treats every character as an independent, editable object rather than a static text string.

Approach	Spelling Accuracy	Per-Letter Transform & Overlap	True Transparent Cutout	Editable Vector Paths (`SVG`)
Standard `.ttf` Font Generators	High	No (fixed baseline & kerning)	Sometimes	Rarely (requires font installation)
AI Prompt Generators	Unpredictable	No (requires re-prompting)	Requires background removal	No (raster pixels only)
Graffitizer	100% Deterministic	Yes (move, rotate, resize, layer)	Yes (1-click Transparent PNG)	Yes (English glyphs exported as SVG paths)

Key Features Under the Hood

1. Three Core Street-Art Styles & 90 Curated Presets

A blank canvas can be intimidating, so Graffitizer starts with 90 curated presets split evenly across three foundational graffiti styles:

Bubble Graffiti (30 Presets): Rounded, playful letterforms with bold outlines and high-contrast fills that stay legible at any size.

Graffiti Tags (30 Presets): Marker-inspired handstyles designed for short nicknames and slanted signatures, including presets like Original Marker, Dry Marker, Chalk Scratch, Street Scrawl, Mist Tag, Wet Paint Tag, and Neon Halo Tag.

Wildstyle Graffiti (30 Presets): Sharper geometry, multi-layered outlines, and decorative effects such as Neon Handstyle, Chrome Tag, Paint Drip, Electric Signature, Gold Rush, Double Outline Tag, and Bevel.

Switching between presets updates the visual styling while preserving your typed text so you can compare directions in seconds.

2. Independent Per-Letter Canvas Controls

In real graffiti lettering, rhythm comes from breaking uniformity. On the Graffitizer canvas, a preset is just your starting point:

Direct Canvas Manipulation: Click or tap any character to drag its position, pull corner handles to resize it, or use the top handle to rotate its angle.
Independent Repeated Characters: If your word has repeated letters (like the two As in LAILA or LUNA), each instance remains completely separate—scaling, tilting, or recoloring one character never mutates the other.
Layer & Overlap Management: When bold outlines overlap, you can reorder letter layers to control which glyph sits in front, or undo an adjustment immediately if an overlap hurts readability.
Granular Color & Background Control: Recolor individual letters, apply a cohesive style palette across all glyphs at once, pick a solid canvas background, or upload your own custom background image to preview the lettering in context.

Here is how the exact same word (LUNA) and preset look before and after individual per-letter adjustments:

Before (Starting Preset):

After (Per-Letter Position, Rotation, Scale & Color Adjustments):

3. Real-World Use Cases & Production-Ready Exports (PNG, Transparent PNG, SVG)

Whether you are dropping a wordmark onto a YouTube thumbnail, printing a notebook sticker, or refining curves in Figma or Illustrator, Graffitizer exports artwork directly from the browser without watermarks or signups:

PNG (With Background): Exports a ready-to-use image with your chosen canvas background color or uploaded backdrop included.
Transparent PNG: Strips the background cleanly so you can layer your lettering over posters, slides, or social profile graphics.
SVG (Vector Shapes): Exports your design as scalable vector artwork. English letters are converted directly into vector <path> shapes rather than <text> dependencies—meaning you can open the .svg in any vector editor without installing a single font file.

Here are a few ways the exported lettering can be used in real projects:

Name Stickers (LAILA): Export a transparent PNG with a bold outline to place over physical or digital labels.

Avatar Wordmarks (ACE): Pair a short nickname with a 1:1 square canvas for a high-contrast profile graphic.

Event & Poster Titles (OPEN MIC): Export custom wildstyle lettering and layer it directly over your poster photography.

4. Built-In Aspect Ratios & Mobile-Friendly Precision

To save time resizing exports later, the editor includes one-click canvas aspect ratios alongside custom pixel dimensions:

Original: 1600 × 840
Square (1:1): 1080 × 1080 (ideal for avatars and profile wordmarks)
Classic & Portrait (4:3 / 3:4 / 3:2): 1200 × 900, 900 × 1200, and 1500 × 1000
Widescreen & Vertical (16:9 / 9:16): 1920 × 1080 and 1080 × 1920
Touch + Precision Controls: On smaller mobile screens where finger-dragging can feel cramped, dedicated position controls let you nudge individual letters with pixel-level accuracy.

Zero-Friction Philosophy: Client-Side & Privacy-First

One of my biggest pet peeves with online creative tools is spending ten minutes customizing a design only to hit a paywall, watermark, or mandatory email signup modal on the download button.

As noted on our SideProjectors project page, Graffitizer was built to stay completely frictionless:

No accounts or onboarding walls: Open the page, type a word, and export immediately.
Ephemeral session state: All edits happen live in your current browser tab—nothing is stored on a backend account, and refreshing gives you a clean slate.

Calling for Feedback from the Dev.to Community!

I would love for you to take Graffitizer for a spin and let me know what you think:

UX & Canvas Controls: Does dragging, rotating, and layering individual letters feel intuitive on your device (desktop or mobile)?
SVG Export Workflow: If you import the exported .svg paths into Figma, Illustrator, or Inkscape, how does the path structure hold up for your workflow?
Preset Wish List: Which new style presets, text effects, or export options would you want to see added next?

Drop your thoughts, critiques, or your favorite lettering creations in the comments below!

Why Wingdings Fonts Break on the Modern Web (And How I Built a Unicode Engine to Fix It)

leo — Tue, 13 Oct 2026 11:37:12 +0000

Back in 1990, Microsoft licensed a series of dingbat glyphs designed by legendary typographers Charles Bigelow and Kris Holmes, packaging them directly into Windows 3.1 under the name Wingdings.

For decades, we used them for playful typography and hidden easter eggs: typing J in Microsoft Word turned into a classic smiley face ☺, and typing A produced a victory sign ✌. In gaming communities like Undertale, W. D. Gaster’s mysterious Wingdings monologues became an enduring piece of internet folklore.

Yet, if you try to copy Wingdings text from a desktop document or a traditional web generator and paste it into Discord, Slack, or X (Twitter) today, you run into this frustrating result:

Input in app:   Hello World (rendered in Wingdings symbols)
Pasted output:  Hello World (back to standard Latin characters)

Why does this happen? Because legacy Wingdings is not a character encoding—it is a glyph substitution hack.

Here is a breakdown of how symbol fonts actually work under the hood, why they break on the modern web clipboard, and how I built a zero-dependency bidirectional Unicode engine to solve the problem with TypeScript and Next.js.

The Underlying Issue: Glyph Substitution vs. True Unicode

In the early 1990s, before Unicode became the universal standard for digital text, operating systems had to map non-alphabetic icons to physical keyboard keys.

Rather than inventing new character encodings, Microsoft mapped dingbat glyphs onto the standard ASCII table:

Key A (ASCII code 0x41) was assigned a victory hand glyph.
Key B (ASCII code 0x42) was assigned a telephone glyph.
Key C (ASCII code 0x43) was assigned a thumbs-up glyph.

When you opened Microsoft Word, typed ABC, and switched the font family to "Wingdings", the underlying file still held the exact bytes [0x41, 0x42, 0x43]. The software simply swapped the font renderer's glyph table.

When the web moved entirely to UTF-8 and cross-platform communication, this decades-old technique broke in three major ways:

Clipboard Isolation: When you copy text styled with @font-face { font-family: 'Wingdings'; }, your browser's clipboard receives the raw ASCII string. Because platforms like Discord and WhatsApp use their own system font stacks, the recipient's device renders standard Latin characters.
Platform Absence: Mobile operating systems (iOS and Android) do not ship with Microsoft’s proprietary desktop symbol font files.
Screen Reader Confusion: Accessibility tools try to pronounce the underlying Latin characters rather than acknowledging the visual symbols.

The Architectural Fix: Mapping Directly to Modern Unicode

To make Wingdings symbols work seamlessly across every chat app, operating system, and browser, we cannot rely on CSS font loading. Instead, we must translate each Latin character directly to its authentic Unicode counterpart (found in Unicode blocks like Dingbats, Miscellaneous Symbols, and Emoji blocks).

For instance:

'A' in Wingdings 1 maps to Unicode \u270C (✌)
'B' maps to Unicode \u2706 (✆)
'M' maps to Unicode \u{1F4A3} (💣)

With true Unicode points, when a user clicks "Copy", the symbols remain identical whether they are pasted on an iPhone, an Android phone, or a Linux terminal.

Engineering the Engine in TypeScript

When building Wingdings Translator, the system needed to support four classic font dialects: Wingdings 1, Wingdings 2, Wingdings 3, and Webdings.

Here is how the core translator handles character mapping, lazy reverse-caching, and surrogate pairs.

1. Dictionary Mapping Matrix

export type FontType = 'wingdings' | 'wingdings2' | 'wingdings3' | 'webdings';

export const DICTIONARIES: Record<FontType, Record<string, string>> = {
  wingdings: {
    'A': '✌', 'B': '✆', 'C': '👍', 'D': '👎', 'E': '☜', 'F': '👉', 'G': '☝', 'H': '☟',
    'I': '☠', 'J': '☺', 'K': '😐', 'L': '☹', 'M': '💣', 'N': '☠', 'O': '⚐', 'P': '🏱',
    'Q': '✈', 'R': '☼', 'S': '💧', 'T': '❄', 'U': '🕆', 'V': '🕇', 'W': '🕈', 'X': '✠',
    'Y': '✡', 'Z': '☪',
    'a': '♋', 'b': '♌', 'c': '♍', 'd': '♎', 'e': '♏', 'f': '♐', 'g': '♑', 'h': '♒',
    'i': '♓', 'j': '♈', 'k': '♉', 'l': '●', 'm': '❍', 'n': '■', 'o': '□', 'p': '◻',
    '0': '📁', '1': '📂', '2': '📄', '3': '🗏', '4': '🗐', '5': '🗄', '6': '⌛',
    '!': '✏', '"': '✂', '#': '✁', '$': '👓', '%': '🕭', '&': '🕮'
  },
  wingdings2: {
    'A': '🖎', 'B': '✍', 'C': '🖒', 'D': '🖓', 'E': '☚', 'F': '☛',
    'a': '🄋', 'b': '➀', 'c': '➁', 'd': '➂', 'e': '➃',
    '0': '⓪', '1': '①', '2': '②', '3': '③', '4': '④'
  },
  wingdings3: {
    'A': '↕', 'B': '↕', 'C': '↔', 'D': '↔', 'E': '↗', 'F': '↙',
    'a': '←', 'b': '↑', 'c': '→', 'd': '↓', 'e': '↖', 'f': '↗'
  },
  webdings: {
    'A': '🏗', 'B': '🏢', 'C': '🏙', 'D': '🏚', 'E': '🏕', 'F': '🏭',
    'a': '✔', 'b': '🚲', 'c': '🔲', 'd': '🛡', 'e': '📦'
  }
};

2. Bidirectional Decoding with Lazy Lookup Inversion

Encoding from English to symbols is straightforward. However, decoding (converting obscure dingbat symbols back into readable English text) requires inverting the dictionary: keys become values, and values become keys.

Creating an inverted object on every user keystroke would cause unnecessary memory allocations and garbage collection stutter during fast typing.

To keep the UI fluid at 60 FPS, the reverse dictionary is constructed lazily once per font family and kept in an in-memory cache:

export class TranslatorCore {
  private cacheReversed: Partial<Record<FontType, Record<string, string>>> = {};

  // English -> Wingdings Unicode Symbols
  toSymbols(text: string, fontType: FontType, useEmojis: boolean = true): string {
    const dict = DICTIONARIES[fontType];
    if (!useEmojis || !dict) return text;

    let result = '';
    for (let i = 0; i < text.length; i++) {
      const char = text[i];
      result += dict[char] !== undefined ? dict[char] : char;
    }
    return result;
  }

  // Wingdings Unicode Symbols -> English
  toEnglish(text: string, fontType: FontType): string {
    const dict = DICTIONARIES[fontType];
    if (!dict) return text;

    // Lazily build the reverse lookup map on demand
    if (!this.cacheReversed[fontType]) {
      this.cacheReversed[fontType] = Object.entries(dict).reduce(
        (acc, [eng, sym]) => {
          acc[sym] = eng;
          return acc;
        },
        {} as Record<string, string>
      );
    }

    const revDict = this.cacheReversed[fontType]!;
    let result = '';

    // Note: Iterate using `for...of` to preserve surrogate pairs in Unicode
    for (const char of text) {
      result += revDict[char] !== undefined ? revDict[char] : char;
    }
    return result;
  }
}

export const defaultEngine = new TranslatorCore();

Unicode Detail: Many symbols (like 💣 \u{1F4A3}) live outside the Basic Multilingual Plane (BMP) and take up two UTF-16 code units (surrogate pairs). Using for (const char of text) natively respects code point boundaries, avoiding broken characters during iteration.

Designing a Clean Frontend Experience with Next.js 16

Beyond the mapping engine, the web app focuses on quick utility and minimal friction:

Zero Server Latency: Everything runs entirely client-side in the browser. Inputting text results in instantaneous translation without network round-trips.
One-Click Direction Swap (A ⇄ B): Users can swap between encoder and decoder modes with a single click, allowing them to decode mysterious messages, tweak them, and re-encode.
Asynchronous Clipboard Operations: Using navigator.clipboard.writeText with visual confirmation feedback, ensuring users know the exact Unicode symbols were copied.

Key Takeaways

Retro web formats still find an audience: Vintage computing quirks, Undertale puzzles, and ARG mystery games keep old-school dingbats alive across modern forums.
Watch your string iterations: Dealing with Unicode requires mindful handling of surrogate pairs. Traditional index loops (text[i]) will corrupt non-BMP symbols.
Small web utilities can still be well-crafted: A single-purpose tool doesn't need to be bloated or loaded with trackers. Pure client-side logic delivers the fastest and cleanest user experience.

If you ever need to decipher a mysterious symbol string or generate one for a project:

👉 Try the live tool: Wingdings Translator

Have you encountered similar legacy character-encoding quirks in your own web projects? Let's discuss in the comments below!