Adaptive Layout Composer

An adaptive layout composer with precise text measurement, dynamic font sizing, and intelligent positioning for international text and emojis.

Features

• Generate SVG images with custom dimensions
• Accurate text measurement using OpenType.js
• Support for international text (CJK, Arabic, Hebrew, etc.) and emojis
• Dynamic font sizing that fits text within constraints
• Support for background images (fetched from URLs)
• Returns SVG data as Uint8Array or base64
• Optimized for Cloudflare Workers

Installation

npm install adaptive-layout-composer

Usage

import { createDynamicSVGImage } from 'adaptive-layout-composer';

// Generate SVG with auto font sizing
const svgData = await createDynamicSVGImage({
  text: "Hello 🌍 World!",
  width: 400,
  height: 200,
  autoFontSize: true,
  ensStyle: true
});

// Convert to base64 for data URL
const base64 = btoa(String.fromCharCode(...svgData));
const dataUrl = `data:image/svg+xml;base64,${base64}`;

API Reference

createDynamicSVGImage(options)

Generate an SVG image with the following options:

{
  text: "Hello World!",           // Text to render
  width: 270,                     // Image width in pixels
  height: 270,                    // Image height in pixels
  textColor: [255, 255, 255, 1],  // RGBA text color
  backgroundImageUrl: "https://example.com/image.jpg", // Optional background
  autoFontSize: true,             // Auto-calculate font size to fit
  maxFontSize: 68,                // Maximum font size when auto-sizing
  fontSize: 48,                   // Manual font size (if autoFontSize: false)
  ensStyle: true,                 // Use ENS-style layout with logo
  textX: 100,                     // Manual X position
  textY: 100,                     // Manual Y position
  maxTextWidth: 200               // Maximum text width
}

Other Functions

• measureTextAccurate(text, fontSize, fontFamily) - Get accurate text measurements
• calculateFontSize(text, maxWidth, maxHeight, minSize, maxSize) - Calculate optimal font size
• initializeFont() - Initialize the embedded Satoshi font

Demo API Usage

The demo worker provides a REST API:

POST /

{
  "text": "Hello 🌍 World!",
  "width": 400,
  "height": 200,
  "autoFontSize": true,
  "ensStyle": true
}

Response:

{
  "success": true,
  "image": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i...",
  "base64": "PHN2ZyB3aWR0aD0i...",
  "format": "svg"
}

Development

The project is structured as a library with a demo implementation:

• Library: Core text measurement and SVG generation functions in src/
• Demo: Cloudflare Worker implementation in demo/

Library Development

# Install dependencies
yarn install

# The library exports functions from src/index.js:
# - createDynamicSVGImage()
# - measureTextAccurate()
# - calculateFontSize()
# - initializeFont()

Demo Worker Development

# Start development server for the demo worker
yarn demo:dev

# This runs the worker from demo/worker.js which:
# - Serves the demo HTML interface at /
# - Provides the API endpoint for image generation

Deployment

Deploy Demo Worker

# Deploy the demo worker to Cloudflare
yarn demo:deploy

# This deploys demo/worker.js as a Cloudflare Worker

Deploy Demo Pages (Optional)

# If you want to serve the demo HTML as static pages:
# 1. Upload demo/index.html to any static hosting service
# 2. Update the WORKER_URL in the HTML to point to your deployed worker

Using as a Library

Import the library functions in your own Cloudflare Worker:

import { createDynamicSVGImage } from './src/index.js';

export default {
  async fetch(request) {
    const svgData = await createDynamicSVGImage({
      text: "Hello World",
      width: 400,
      height: 200
    });

    return new Response(svgData, {
      headers: { 'Content-Type': 'image/svg+xml' }
    });
  }
}