Adjust Text Spacing - Svelte

Control letter spacing, line height, and paragraph spacing in text blocks using the Block API.

Text spacing demonstration showing adjusted letter spacing, line height, and paragraph spacing

5 mins

estimated time

CE.SDK provides three text spacing properties: text/letterSpacing, text/lineHeight, and text/paragraphSpacing. All are float properties controlled via engine.block.setFloat() and engine.block.getFloat(). In addition, engine.block.setTextLineHeight() and engine.block.getTextLineHeight() let you override line height for individual paragraphs. Text spacing adjustments are programmatic-only; there is no built-in UI for these properties.

import type { EditorPlugin, EditorPluginContext } from "@cesdk/cesdk-js";

import {
  BlurAssetSource,
  ImageColorsAssetSource,
  ColorPaletteAssetSource,
  CropPresetsAssetSource,
  DemoAssetSources,
  EffectsAssetSource,
  FiltersAssetSource,
  PagePresetsAssetSource,
  StickerAssetSource,
  TextAssetSource,
  TextComponentAssetSource,
  TypefaceAssetSource,
  UploadAssetSources,
  VectorShapeAssetSource,
} from "@cesdk/cesdk-js/plugins";
import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor';
import packageJson from "./package.json";

/**
 * CE.SDK Plugin: Adjust Text Spacing Guide
 *
 * Demonstrates programmatic text spacing capabilities:
 * - Letter spacing (tracking)
 * - Line height (leading)
 * - Paragraph spacing
 */
class Example implements EditorPlugin {
  name = packageJson.name;

  version = packageJson.version;

  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    if (!cesdk) {
      throw new Error("CE.SDK instance is required for this plugin");
    }

    await cesdk.addPlugin(new DesignEditorConfig());

    // Add asset source plugins
    await cesdk.addPlugin(new BlurAssetSource());
    await cesdk.addPlugin(new ImageColorsAssetSource());
    await cesdk.addPlugin(new ColorPaletteAssetSource());
    await cesdk.addPlugin(new CropPresetsAssetSource());
    await cesdk.addPlugin(
      new UploadAssetSources({ include: ["ly.img.image.upload"] }),
    );
    await cesdk.addPlugin(
      new DemoAssetSources({
        include: [
          "ly.img.templates.blank.*",
          "ly.img.templates.presentation.*",
          "ly.img.templates.print.*",
          "ly.img.templates.social.*",
          "ly.img.image.*",
        ],
      }),
    );
    await cesdk.addPlugin(new EffectsAssetSource());
    await cesdk.addPlugin(new FiltersAssetSource());
    await cesdk.addPlugin(new PagePresetsAssetSource());
    await cesdk.addPlugin(new StickerAssetSource());
    await cesdk.addPlugin(new TextAssetSource());
    await cesdk.addPlugin(new TextComponentAssetSource());
    await cesdk.addPlugin(new TypefaceAssetSource());
    await cesdk.addPlugin(new VectorShapeAssetSource());

    await cesdk.actions.run("scene.create", {
      page: { width: 800, height: 600, unit: "Pixel" },
    });

    const engine = cesdk.engine;
    const page = engine.block.findByType("page")[0];


    // Text block 1: Letter Spacing Demo
    const textLetterSpacing = engine.block.create("text");
    engine.block.appendChild(page, textLetterSpacing);
    engine.block.setPositionX(textLetterSpacing, 50);
    engine.block.setPositionY(textLetterSpacing, 30);
    engine.block.setWidth(textLetterSpacing, 700);
    engine.block.setHeightMode(textLetterSpacing, "Auto");
    engine.block.replaceText(textLetterSpacing, "CREATIVE STUDIO");
    engine.block.setTextFontSize(textLetterSpacing, 48);

    // Set letter spacing - controls space between characters
    // Positive values increase spacing, negative values tighten characters
    engine.block.setFloat(textLetterSpacing, "text/letterSpacing", 0.1);

    // Read current letter spacing value
    const letterSpacing = engine.block.getFloat(
      textLetterSpacing,
      "text/letterSpacing",
    );
    console.log("Letter spacing:", letterSpacing);

    // Text block 2: Line Height Demo
    const textLineHeight = engine.block.create("text");
    engine.block.appendChild(page, textLineHeight);
    engine.block.setPositionX(textLineHeight, 50);
    engine.block.setPositionY(textLineHeight, 150);
    engine.block.setWidth(textLineHeight, 700);
    engine.block.setHeightMode(textLineHeight, "Auto");
    engine.block.replaceText(
      textLineHeight,
      "Design your ideas\nBring them to life",
    );
    engine.block.setTextFontSize(textLineHeight, 48);

    // Set line height - controls vertical distance between lines
    // Values are multipliers of font size (1.5 = 150% of font size)
    engine.block.setFloat(textLineHeight, "text/lineHeight", 1.8);

    // Read current line height value
    const lineHeight = engine.block.getFloat(textLineHeight, "text/lineHeight");
    console.log("Line height:", lineHeight);

    // Text block 3: Per-Paragraph Line Height Demo
    const textParaLineHeight = engine.block.create("text");
    engine.block.appendChild(page, textParaLineHeight);
    engine.block.setPositionX(textParaLineHeight, 50);
    engine.block.setPositionY(textParaLineHeight, 350);
    engine.block.setWidth(textParaLineHeight, 700);
    engine.block.setHeightMode(textParaLineHeight, "Auto");
    engine.block.replaceText(
      textParaLineHeight,
      "First paragraph\nSecond paragraph\nThird paragraph",
    );
    engine.block.setTextFontSize(textParaLineHeight, 36);

    // Set the block-level line height (applies to all paragraphs by default)
    engine.block.setFloat(textParaLineHeight, "text/lineHeight", 1.2);

    // Override line height for paragraph 0 only
    engine.block.setTextLineHeight(textParaLineHeight, 2.5, 0);

    // Read the line height for each paragraph
    // Returns the override for paragraph 0, block-level fallback for others
    const para0LineHeight = engine.block.getTextLineHeight(textParaLineHeight, 0);
    const para1LineHeight = engine.block.getTextLineHeight(textParaLineHeight, 1);
    console.log("Para 0 line height:", para0LineHeight); // 2.5 (override)
    console.log("Para 1 line height:", para1LineHeight); // 1.2 (block-level fallback)

    // Clear the per-paragraph override — paragraph 0 reverts to block-level value
    engine.block.setTextLineHeight(textParaLineHeight, null, 0);

    // Set block-level line height and clear all paragraph overrides at once
    engine.block.setTextLineHeight(textParaLineHeight, 1.8);

    // Text block 4: Paragraph Spacing Demo
    const textParagraphSpacing = engine.block.create("text");
    engine.block.appendChild(page, textParagraphSpacing);
    engine.block.setPositionX(textParagraphSpacing, 50);
    engine.block.setPositionY(textParagraphSpacing, 490);
    engine.block.setWidth(textParagraphSpacing, 700);
    engine.block.setHeightMode(textParagraphSpacing, "Auto");
    engine.block.replaceText(
      textParagraphSpacing,
      "Start Creating\nJoin Today",
    );
    engine.block.setTextFontSize(textParagraphSpacing, 48);

    // Set paragraph spacing - adds space after paragraph breaks
    engine.block.setFloat(textParagraphSpacing, "text/paragraphSpacing", 4);

    // Read current paragraph spacing value
    const paragraphSpacing = engine.block.getFloat(
      textParagraphSpacing,
      "text/paragraphSpacing",
    );
    console.log("Paragraph spacing:", paragraphSpacing);

    // Zoom to show all text blocks
    engine.scene.zoomToBlock(page, { padding: 40 });
  }
}

export default Example;

This guide covers how to adjust letter spacing between characters, line height between lines, and paragraph spacing between paragraphs.

Letter Spacing#

We control the horizontal space between characters using engine.block.setFloat() with the text/letterSpacing property. Positive values increase spacing, negative values tighten characters.

// Text block 1: Letter Spacing Demo
const textLetterSpacing = engine.block.create("text");
engine.block.appendChild(page, textLetterSpacing);
engine.block.setPositionX(textLetterSpacing, 50);
engine.block.setPositionY(textLetterSpacing, 30);
engine.block.setWidth(textLetterSpacing, 700);
engine.block.setHeightMode(textLetterSpacing, "Auto");
engine.block.replaceText(textLetterSpacing, "CREATIVE STUDIO");
engine.block.setTextFontSize(textLetterSpacing, 48);

// Set letter spacing - controls space between characters
// Positive values increase spacing, negative values tighten characters
engine.block.setFloat(textLetterSpacing, "text/letterSpacing", 0.1);

// Read current letter spacing value
const letterSpacing = engine.block.getFloat(
  textLetterSpacing,
  "text/letterSpacing",
);
console.log("Letter spacing:", letterSpacing);

Letter spacing (also known as tracking) helps adjust text density for improved readability or visual effect.

Line Height#

We control the vertical distance between lines using engine.block.setFloat() with the text/lineHeight property. Values are multipliers of the font size—for example, 1.5 means 150% of the font size.

// Text block 2: Line Height Demo
const textLineHeight = engine.block.create("text");
engine.block.appendChild(page, textLineHeight);
engine.block.setPositionX(textLineHeight, 50);
engine.block.setPositionY(textLineHeight, 150);
engine.block.setWidth(textLineHeight, 700);
engine.block.setHeightMode(textLineHeight, "Auto");
engine.block.replaceText(
  textLineHeight,
  "Design your ideas\nBring them to life",
);
engine.block.setTextFontSize(textLineHeight, 48);

// Set line height - controls vertical distance between lines
// Values are multipliers of font size (1.5 = 150% of font size)
engine.block.setFloat(textLineHeight, "text/lineHeight", 1.8);

// Read current line height value
const lineHeight = engine.block.getFloat(textLineHeight, "text/lineHeight");
console.log("Line height:", lineHeight);

Line height affects multi-line text. A single line of text won’t show visible differences.

Per-Paragraph Line Height#

Override the line height for individual paragraphs using engine.block.setTextLineHeight() with a paragraphIndex. Passing null for the value clears the override and reverts that paragraph to the block-level value. Calling setTextLineHeight() without a paragraphIndex (or with -1) sets the block-level line height and clears all paragraph overrides at once.

// Text block 3: Per-Paragraph Line Height Demo
const textParaLineHeight = engine.block.create("text");
engine.block.appendChild(page, textParaLineHeight);
engine.block.setPositionX(textParaLineHeight, 50);
engine.block.setPositionY(textParaLineHeight, 350);
engine.block.setWidth(textParaLineHeight, 700);
engine.block.setHeightMode(textParaLineHeight, "Auto");
engine.block.replaceText(
  textParaLineHeight,
  "First paragraph\nSecond paragraph\nThird paragraph",
);
engine.block.setTextFontSize(textParaLineHeight, 36);

// Set the block-level line height (applies to all paragraphs by default)
engine.block.setFloat(textParaLineHeight, "text/lineHeight", 1.2);

// Override line height for paragraph 0 only
engine.block.setTextLineHeight(textParaLineHeight, 2.5, 0);

// Read the line height for each paragraph
// Returns the override for paragraph 0, block-level fallback for others
const para0LineHeight = engine.block.getTextLineHeight(textParaLineHeight, 0);
const para1LineHeight = engine.block.getTextLineHeight(textParaLineHeight, 1);
console.log("Para 0 line height:", para0LineHeight); // 2.5 (override)
console.log("Para 1 line height:", para1LineHeight); // 1.2 (block-level fallback)

// Clear the per-paragraph override — paragraph 0 reverts to block-level value
engine.block.setTextLineHeight(textParaLineHeight, null, 0);

// Set block-level line height and clear all paragraph overrides at once
engine.block.setTextLineHeight(textParaLineHeight, 1.8);

engine.block.getTextLineHeight() returns the effective line height for a given paragraph — the per-paragraph override if one is set, otherwise the block-level fallback. This makes it easy to read the resolved value without tracking overrides manually.

Paragraph Spacing#

We add vertical space between paragraphs using engine.block.setFloat() with the text/paragraphSpacing property. The value is added after each paragraph break (newline characters in the text content).

// Text block 4: Paragraph Spacing Demo
const textParagraphSpacing = engine.block.create("text");
engine.block.appendChild(page, textParagraphSpacing);
engine.block.setPositionX(textParagraphSpacing, 50);
engine.block.setPositionY(textParagraphSpacing, 490);
engine.block.setWidth(textParagraphSpacing, 700);
engine.block.setHeightMode(textParagraphSpacing, "Auto");
engine.block.replaceText(
  textParagraphSpacing,
  "Start Creating\nJoin Today",
);
engine.block.setTextFontSize(textParagraphSpacing, 48);

// Set paragraph spacing - adds space after paragraph breaks
engine.block.setFloat(textParagraphSpacing, "text/paragraphSpacing", 4);

// Read current paragraph spacing value
const paragraphSpacing = engine.block.getFloat(
  textParagraphSpacing,
  "text/paragraphSpacing",
);
console.log("Paragraph spacing:", paragraphSpacing);

Paragraph spacing only affects text with actual paragraph breaks. Single paragraphs won’t show visible differences.

API Reference#

Method	Purpose
`engine.block.setFloat()`	Set numeric spacing property values
`engine.block.getFloat()`	Get current spacing property values
`engine.block.setTextLineHeight()`	Set block-level or per-paragraph line height
`engine.block.getTextLineHeight()`	Get effective line height for a paragraph

Properties Reference#

Property	Type	Purpose
`text/letterSpacing`	Float	Space between characters (tracking)
`text/lineHeight`	Float	Block-level multiplier for vertical line distance
`text/paragraphSpacing`	Float	Space added after paragraph breaks

Troubleshooting#

Spacing changes not visible: Ensure the text block contains enough content to show the effect—multiple characters for letter spacing, multiple lines for line height, multiple paragraphs for paragraph spacing.

Unexpected line height behavior: Line height is a multiplier of font size, not an absolute value. A value of 1.5 means 150% of the current font size.

Paragraph spacing not working: Verify the text content contains actual paragraph breaks (newline characters).