Sone

Seanghay's Optimized Nesting Engine 😉

សូន - ប្រមូលអ្វីៗដែលមានសាច់ទន់ជ្រាយឱ្យកើតជាដុំ, ជាគ្រាប់ឬជារូប

SwiftUI-inspired canvas layout engine with advanced rich text support. Sone is built to generate PDF or Image on the server with minimal memory footprint and performance. It provides some features such as

• Flex Layout (yoga-layout)
• SVG Support without rasterizing.
• Squircle Rounded Corner (iOS-like)
• Text Alignment (Left, Right, Center, Justify) for Khmer, Thai, Lao and some langauges.
• Font Tracing - Get a list of fonts that used in the component tree. (See test/text-01.js)
• Table (See test/table.js)
• Repeating Linear Gradient & Linear Gradient
• Composable
• Output as SVG, PDF, and Image(JPG,PNG,WEBP)

Get started

🙏 Thanks to Dmitry Iv. for donating the sone package name.

npm install sone

import fs from "node:fs/promises";

import { 
  sone, 
  Column, 
  Text, 
  Span
} from "sone";

function Document() {
  return Column(
    Text(
      "Hello world! ",
      Span("Sone.")
        .color("orange")
        .weight("bold")
        .shadow("2px 2px 0px rgba(0,0,0,.2)"),
        " 😍🇰🇭"
    ).size(34),
  ).padding(40);
}

// save as Image
await fs.writeFile("test/output.png", await sone(Document).png());

// save as PDF
await fs.writeFile("test/output.pdf", await sone(Document).pdf());

Preview

test/output.pdf

A complex Sone component looks like this

function Document() {
  return Column(
    Text(
      "ភ្នំពេញ៖ ",
      Span("ពិធីបុណ្យ ព្រះសពរបស់ ").color("green"),
      Span("លោក សុិន សុខខា").font("Moul").color("red").size(23),
      Span(" បានប្រព្រឹត្តិធ្វើទៅ Internal នៅ"),
      Span(" ថ្ងៃសៅរ៍ ទី២៦មេសា").weight(700),
      Span(
        "នេះ។ ព្រះមហាក្សត្រ ប្រមុខរដ្ឋ ប្រមុខរដ្ឋាភិបាល និងគណៈប្រតិភូសរុបជាង១៦០ បានមកចូលរួម នៅក្នុងកម្មវិធីនេះ",
      ),
      Span(" លោក សុិន សុខខុង ").font("Moul").color("salmon").size(27),
      Span("។").color("orange"),
    )
      .font("Inter Khmer")
      .size(32)
      .align("justify")
      .color("#333")
      .lineHeight(1.45),
    Flex().height(2, "auto").bg("#eee"),
    Text(
      "....",
    )
      .size(18)
      .font("Inter Khmer")
      .lineHeight(1.4)
      .color("gray"),
  )
    .maxWidth(700)
    .padding(40)
    .gap(10);
}

See Examples

test/text-01.js

test/text-02.js

test/table.js

test/basic-01.js

test/table-2.js

Roadmap

• Flex Engine (Yoga Layout)
• Linear Gradient / Repeating Linear Gradient
• Figma Squircle
• Text Stroke (https://jsfiddle.net/vtmnyea8/)
• Box Shadow
• Text Shadow
• Border
• Text Span
• Align/Justify Enum -> Literal String
• SVG to Path2D
• Image Scale Type
• Transforms (Scale, Rotate, Translate)
• Mesh Gradient
• Span OffsetY
• Text Decoration (Underline, Cross, Overline)
• Mask
• Opacity
• JSON Serialization
• JSON Deserialization
• Table
• Grid
• Background Image
• Emoji
• Font
• Text Fill Gradient
• Non-rasterized SVG (Canvg)
• Font Tracing
• Move from node-canvas to skia-canvas (Emoji, Colored Fonts, Font Fallback, SVG, Path2D, Variable Fonts)
• Sone Socket Server & Socket Image Viewer

News

• Sone got featured on Khmerload [https://www.khmerload.com/article/208169]

Reference

• https://github.com/chearon/dropflow
• https://github.com/vercel/satori
• https://github.com/GuptaSiddhant/recanvas
• https://github.com/catalinmiron/react-native-css-gradient
• https://jsfiddle.net/vtmnyea8/
• https://github.com/Automattic/node-canvas
• https://www.myfirstfont.com/glossary.html
• https://en.wikipedia.org/wiki/X-height
• https://github.com/foliojs/fontkit
• https://raphlinus.github.io/text/2020/10/26/text-layout.html
• https://raphlinus.github.io/rust/skribo/text/2019/04/04/font-fallback.html
• https://simoncozens.github.io/fonts-and-layout/
• https://mrandri19.github.io/2019/07/24/modern-text-rendering-linux-overview.html