Text Formatting

Powerful Rails text formatting helpers wrapped in beautiful typography. The rui_text_fmt component combines Rails text transformations with the Text component's styling system.

Key Features

Text Truncation - Smart truncation with ellipsis
Highlighting - Highlight search terms or phrases
Sanitization - Remove dangerous HTML from user content
Number Formatting - Currency, percentage, human-readable, phone
Time Formatting - "X ago" style timestamps
Pluralization - Smart word pluralization
Text Transformations - Titleize, excerpt, simple_format
Auto-Linkify - Convert URLs and emails to clickable links
Prefix/Suffix - Add text before or after content
Full Text Styling - All rui_text options available

Basic Usage

Simple Examples

This is a very long text that needs t...

$99.99

Search for Ruby in this Ruby on Rails text

about 2 hours ago

<%= rui_text_fmt("This is a very long text that needs to be truncated for display", truncate: 40) %>
<%= rui_text_fmt(99.99, number_format: :currency, weight: :bold, size: :lg, color: :success) %>
<%= rui_text_fmt("Search for Ruby in this Ruby on Rails text", highlight: "Ruby", size: :lg) %>
<%= rui_text_fmt(Time.now - 2.hours, time_ago: true, size: :sm, color: :neutral) %>

Text Truncation

Truncate Long Text

The quick brown fox jumps over the lazy dog. Th...

Short text

Lorem ipsum dolor sit amet,...

<%= rui_text_fmt(@post.body, truncate: 50) %>
<%= rui_text_fmt(@description, truncate: 100, color: :neutral) %>

Number Formatting

Format Numbers

Currency:

$1,234.56

Percentage:

85.500%

Human Readable:

1.23 Million

Phone:

555-123-4567

<%= rui_text_fmt(@product.price, number_format: :currency) %>
<%= rui_text_fmt(@score, number_format: :percentage) %>
<%= rui_text_fmt(@downloads, number_format: :human) %>
<%= rui_text_fmt(@user.phone, number_format: :phone) %>

Text Highlighting

Highlight Search Terms

Ruby on Rails is a web framework written in Ruby

The quick brown fox jumps over the lazy dog

Search for important terms in important documents

<%= rui_text_fmt(@article.content, highlight: params[:query]) %>
<%= rui_text_fmt(@description, highlight: @search_term, color: :primary) %>

Time Formatting

"X ago" Style Timestamps

30 minutes ago

about 3 hours ago

2 days ago

<%= rui_text_fmt(@post.created_at, time_ago: true, size: :sm) %>
<%= rui_text_fmt(@comment.updated_at, time_ago: true, color: :neutral) %>

Pluralization

Smart Word Pluralization

0 comments

1 comment

5 comments

42 items

<%= rui_text_fmt("comment", pluralize: true, count: @post.comments_count) %>
<%= rui_text_fmt("like", pluralize: true, count: @likes, color: :danger) %>

HTML Sanitization

Remove Dangerous HTML

With sanitization:

Safe text alert('XSS')

<%= rui_text_fmt(@user_content, sanitize: true) %>
<%= rui_text_fmt(@bio, sanitize: true, linkify: true) %>

Auto-Linkify

Convert URLs and Emails to Links

Visit https://rubyonrails.org for more info

<%= rui_text_fmt(@bio, linkify: true) %>
<%= rui_text_fmt(@description, linkify: true, simple_format: true) %>

Prefix and Suffix

Add Text Before or After

Hello, John!

Total: $99.99

You have 5 new messages

<%= rui_text_fmt(@username, prefix: "Welcome back, ", suffix: "!") %>
<%= rui_text_fmt(@total, prefix: "Total: ", number_format: :currency) %>

Default Fallback

Show Default Text When Empty

No description provided

N/A

<%= rui_text_fmt(@user.bio, default: "No bio yet", color: :neutral) %>
<%= rui_text_fmt(@product.description, default: "Description coming soon") %>

Combining Features

Use Multiple Formatters Together

This is a very long text wi...

Total Revenue: $1,234,567.89

contact@example.com and https://example.com

<%= rui_text_fmt(@post.body,
                truncate: 100,
                highlight: params[:query],
                sanitize: true,
                color: :neutral) %>

<%= rui_text_fmt(@revenue,
                number_format: :currency,
                prefix: "Total: ",
                weight: :bold,
                size: :xl) %>

Text Component Styling

All rui_text Options Available

The rui_text_fmt component supports all styling options from rui_text:

as: - HTML tag (h1-h6, p, span, div, etc.)
color: - Color theme (primary, success, danger, etc.)
size: - Text size (xs, sm, base, lg, xl, xl2-xl6)
weight: - Font weight (thin, light, normal, medium, semibold, bold, etc.)
align: - Text alignment (left, center, right, justify)
font: - Font family (sans, serif, mono)
variant: - Visual style (solid, outline, ghost, soft, link, strong, subtle)

Examples with Full Styling

Truncated headline

$99.99

Important highlight

API Reference

rui_text_fmt

Rails text formatting helpers wrapped with Text component styling

Parameter	Type	Default	Description
text	String	—	Text content to format (positional parameter)
truncate	Integer	—	Truncate text to this length
highlight	String	—	Phrase to highlight in the text
sanitize	Boolean	`false`	Remove dangerous HTML content
sanitize_options	Hash	`{}`	Options for sanitize helper
pluralize	Boolean	`false`	Enable pluralization (requires count)
count	Integer	—	Count for pluralization
excerpt	String	—	Extract excerpt around this phrase
radius	Integer	`100`	Radius for excerpt extraction
simple_format	Boolean	`false`	Convert line breaks to paragraphs
time_ago	Boolean	`false`	Format time as 'X ago' style
titleize	Boolean	`false`	Capitalize each word
number_format	Symbol	—	:currency, :percentage, :human, :phone
number_options	Hash	`{}`	Options for number formatting
linkify	Boolean	`false`	Convert URLs and emails to clickable links
default	String	—	Fallback text if text is blank
prefix	String	—	Text to prepend
suffix	String	—	Text to append

Text Component Styling

All rui_text options are available for styling

Parameter	Type	Default	Description
as	Symbol	`:span`	HTML tag (h1-h6, p, span, div, etc.)
color	Symbol	—	Color theme (primary, success, danger, etc.)
size	Symbol	`:base`	Text size (xs, sm, base, lg, xl, xl2-xl6)
weight	Symbol	—	Font weight (thin, light, normal, medium, semibold, bold)
align	Symbol	—	Text alignment (left, center, right, justify)
font	Symbol	—	Font family (sans, serif, mono)
variant	Symbol	—	Visual style (solid, outline, ghost, soft, link)

Usage Tips

Order Matters

Formatters are applied in a specific order: time_ago → number_format → pluralize → titleize → sanitize → linkify → simple_format → excerpt → truncate → prefix/suffix → highlight

Sanitize User Content

Always use sanitize: true when displaying user-generated content to prevent XSS attacks.

Combine with Text Styling

Use variants (solid, soft, outline) and colors to create visually distinct formatted text blocks.

Related Components

Text

Pure typography styling for headings, paragraphs, and inline text without formatting

Badge

Lightweight labeling indicators that pair perfectly with pluralized counts

Link

Styled links with conditional rendering and Turbo integration for navigation