Rideful

How Do I Style Text and Shapes?

Ask for the change in the chat and the agent sets the properties — hex colors, point-based font sizes, markdown formatting, and shape styling. This page is the reference behind those properties.

Every element on a Rideful slide — text, shapes, and lines — can be styled with colors, fonts, sizing, alignment, and more. You rarely set these by hand: describe what you want in the chat panel (“make the title dark blue, 36pt, centered”) and the agent translates it into the right properties. The same is true from your own AI assistant over MCP, and you can always adjust an element directly in the editor.

Text Styling

Markdown Formatting

Text content supports markdown for inline formatting:

  • **bold** — bold text
  • *italic* — italic text
  • - bullet item — unordered list
  • 1. numbered item — ordered list
  • <span style="color:#C9A227">text</span> — color for one run inside a line; nests with bold and italic

Font Properties

  • fontSize — in points (12–14 for body, 18–24 for headings, 36+ for titles)
  • fontFamily — choose from util_list_fonts results. Every library font exports to PowerPoint: Google Fonts are embedded in the file.
  • textColor — a theme slot such as accent1, which follows later theme changes, or a hex string (e.g., #FFFFFF, #1A1A2E)

Alignment

  • textAlign — left, center, or right
  • verticalAlign — top, middle, or bottom

Spacing and Insets

  • textInsets — padding inside the text container in pixels: {left, top, right, bottom}
  • lineSpacing — multiplier (1.0 = single, 1.5 = one-and-a-half, 2.0 = double)
  • paragraphSpacing — spacing between paragraphs in points: {before, after}

Element Role

Always set the role property on text elements with semantic meaning: title (36–44pt), subtitle (18–24pt), body (14–18pt), footer (10–12pt). See Slide Rules & Element Roles.

Table Text

A table cell's text formats like a text box's. In the editor, double-click a cell to edit it with the same toolbar and shortcuts; drag across cells, or Shift+click, to format a range of cells together; or select the table and the toolbar formats every cell. Each row grows and shrinks with its text. A cell's bold and italic follow the table's style unless you set them: Bold in a bold header makes that text regular, and pressing it again returns it to the style. Inserting a table, its rows, columns and merges, and its Table style are in How do I add and edit tables?.

Text Example

element_create({
  deckId: "deck_abc",
  slideId: "slide_1",
  elementType: "text",
  x: 60, y: 80, width: 600, height: 200,
  text: "**Q4 Highlights**\n- Revenue up 18%\n- 3 new partnerships\n- Team grew to 25",
  fontSize: 18,
  fontFamily: "Inter",
  textColor: "#1C2833",
  textAlign: "left",
  verticalAlign: "top",
  lineSpacing: 1.4,
  role: "body"
})

Shape Styling

Shape Types

  • rectangle — standard rectangular shape, with an optional cornerRadius for rounded corners
  • ellipse — set equal width and height for a perfect circle
  • diamond — diamond / rotated square
  • triangle
  • arrow — points right
  • leftArrow, upArrow, downArrow — point as named
  • hexagon
  • star
  • pie — a filled wedge between two angles
  • arc — an open curved stroke between two angles; no fill and no text by default
  • donut — a ring, full or partial

circle is accepted as a deprecated alias for ellipse — the MCP server normalizes it before storage, so agents should emit ellipse directly.

Fill and Stroke

  • fillColor — a theme slot (e.g., accent1) or a hex color (e.g., #FF5733). A shape created without one fills accent1
  • strokeColor — outline color, a theme slot or a hex
  • strokeWidth — width in points (centered on the shape edge)
  • strokeStyle — solid, dashed, or dotted
  • cornerRadius — corner radius in pixels (rectangle only; ignored on other shape types)
  • startAngle, endAngle — degrees, 0 at 3 o'clock, clockwise, as in PowerPoint. A pie or arc requires both; on a donut they make a partial ring. A 75% ring from the top is 270 → 180
  • thicknessRatio — donut ring thickness as a fraction of the radius, 0–1 (default 0.5)
  • shadow — soft lifts a card or panel off a light background, lifted floats a callout or panel, none removes one. Give one layer of cards a shadow, not every shape. An image takes one too, and its shadow follows the picture's visible pixels: a cut-out on a transparent background casts its own outline, and a full-bleed photo needs none. A shadow imported from PowerPoint keeps its own values, which slide_get shows; setting a preset or none replaces it. In the editor, pick Shadow in the shape or image toolbar, or in the properties panel

Opacity

opacity: 0–100 (0 = fully transparent, 100 = fully opaque). Useful for layered backgrounds and overlapping shapes.

Text Inside Shapes

Shapes support text directly — use the text property on the shape instead of layering a separate text element on top. All text styling properties (fontSize, fontFamily, textColor, alignment, etc.) work inside shapes.

Shape Example

element_create({
  deckId: "deck_abc",
  slideId: "slide_1",
  elementType: "shape",
  shapeType: "rectangle",
  x: 60, y: 60, width: 300, height: 80,
  fillColor: "#2E4053",
  strokeColor: "#1C2833",
  strokeWidth: 2,
  strokeStyle: "solid",
  opacity: 100,
  text: "Get Started",
  fontSize: 24,
  fontFamily: "Inter",
  textColor: "#FFFFFF",
  textAlign: "center",
  verticalAlign: "middle"
})

Line Styling

Endpoints

Lines are defined by their start and end points. You can use free coordinates or connect to other elements:

  • Free coordinates — startX, startY, endX, endY (in pixels)
  • Connected anchors — attach to another element so the line moves with it

Arrows

  • arrowHead — arrow at the end point (→)
  • arrowTail — arrow at the start point (←)
  • Set both for a double-ended arrow (↔)

Stroke

Lines use the same stroke properties as shapes: strokeColor (a theme slot or a hex), strokeWidth (points), and strokeStyle (solid, dashed, dotted).

Properties Shared by All Elements

  • x, y — position in pixels from the top-left corner
  • width, height — dimensions in pixels
  • rotation — degrees (0–360)
  • opacity — 0–100 percentage
  • zIndex — layer order (higher values appear on top)

Working with Colors

A shape's fill and outline, a line, an icon, a background and an element's text color take a theme slot (accent1–accent6, dark1, light1, …) or a hex string (e.g., #1A1A2E). A slot points at the deck's theme: change the theme and everything that names the slot changes with it. A hex is a fixed color, for a one-off. What you create without a color points at the theme. A swatch picked in the editor's color picker is a fixed color for now.

For curated color palettes designed for presentations, see Visual Design Techniques which includes 10 reference palettes with hex values.

Common Issues

  • Text overflows its container: Use util_measure_text before creating elements to check how tall and wide text will be at a given width and font size. Adjust dimensions or reduce content.
  • Font not rendering correctly: The font may not be in Rideful's library. Call util_list_fonts to discover available fonts; a font outside the library renders only where it is installed.
  • Separate text element on top of shape: Not needed — shapes support text directly via the text property. Using a separate text element on top of a shape can cause alignment and selection issues.
  • Units confusion: Font sizes, paragraph spacing and stroke widths are in points. Positions, dimensions and insets are in pixels.

Related