R
Rideful Slides

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. Use universal or office tier for PowerPoint-safe exports.
  • textColor — 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.

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
  • hexagon
  • star

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 — any hex color (e.g., #FF5733)
  • strokeColor — outline color (hex)
  • strokeWidth — width in pixels (centered on the shape edge)
  • strokeStyle — solid, dashed, or dotted
  • cornerRadius — corner radius in pixels (rectangle only; ignored on other shape types)

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 (hex), strokeWidth (pixels), 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

All colors are hex strings (e.g., #FFFFFF, #1A1A2E). 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. Use universal or office tier for PowerPoint export safety.
  • 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 and paragraph spacing are in points. Positions, dimensions, insets, and stroke widths are in pixels.

Related