Overview
Design
Frontend
Fullstack
Create Website
Blog
Frontend
Docs
->
Text Attributes
Docs
Book 🚧
Video Course
Overview 🚧
Why Use fastn for Your Next Frontend? 🚧
Design System 🚧
Getting Started
Data Modelling
Variables
Built-in Types
record
or-type
list
component
Headers
Visibility
Kernel Components
ftd.document 🚧
ftd.row
ftd.column
ftd.container
ftd.text
ftd.image
ftd.rive
ftd.iframe
ftd.integer
ftd.decimal
ftd.boolean
ftd.code
ftd.text-input
ftd.checkbox
ftd.desktop
ftd.mobile
Attributes
Common Attributes
Text Attributes
Container Attributes
Container Root Attributes
import
Using export/exposing
Functions
Built-in Functions
Built-in Rive Functions
Built-in Variables
ftd Events
Rive Events
Use color scheme package
processor
foreign variables
assets
How to access files
How to access fonts
How to make page responsive
Using JS
JS in function
Web Component
Create fastn package
Best Practices
Formatting
Import
Auto-import
Device
Conditions
Container
Same argument & attribute types
FScript
Inherited Types
Variable & it’s Type
Optional Arguments
Commenting
Self referencing
Property

Text Attributes

These attributes are available to ftd.text, ftd.integer, ftd.decimal and ftd.boolean components.

style: ftd.text-style list

This style attribute can be used to add inline styles on the rendered content. It accepts a list of ftd.text-style values and is optional.
Sample code using style
Input
-- ftd.text: These are stylized values
style: italic, regular
color: $inherited.colors.text-strong

-- ftd.integer: 1234
style: bold
color: $inherited.colors.text-strong

-- ftd.decimal: 3.142
style: underline, italic
color: $inherited.colors.text-strong

-- ftd.boolean: true
style: heavy
color: $inherited.colors.text-strong
Output
These are stylized values
1234
3.142
true

text-align: optional ftd.text-align

This attribute is used to align the rendered content. It accepts the ftd.text-align type value and is optional.
Sample code using text-align
Input
-- ftd.row:
spacing.fixed.px: 10

-- ftd.text:
text-align: center
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: center** text. a bit longer text so you can see what's going on.

-- ftd.text:
text-align: start
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: start** text. a bit longer text so you can see what's
going on.

-- ftd.text:
text-align: end
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: end** text. a bit longer text so you can see what's going
on.

-- ftd.text:
text-align: justify
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: justify** text. a bit longer text so you can see what's going on.

-- end: ftd.row
Output
this is text-align: center text. a bit longer text so you can see what’s going on.
this is text-align: start text. a bit longer text so you can see what’s going on.
this is text-align: end text. a bit longer text so you can see what’s going on.
this is text-align: justify text. a bit longer text so you can see what’s going on.

text-indent: optional ftd.length

This attribute can be used to specify the indentation of the first line in the rendered text. It accepts a ftd.length value and is optional.
Sample code using text-indent
Input
-- ftd.text:
text-indent.px: 30
color: $inherited.colors.text-strong

This is some indented text.

It only applies spacing at the beginning of the first line.
Output

This is some indented text.

It only applies spacing at the beginning of the first line.

display: optional ftd.display

This display attribute sets the display behaviour of an element. It accepts value of type ftd.display and is optional.

Note: This attribute can only be used within ftd.container and won’t work from within any other ftd containers like ftd.row and ftd.column.
Sample code using display
Input
-- ftd.container:
color: $inherited.colors.text

-- ftd.text:
display: block
border-color: $yellow-red
border-width.px: 2

This is a block element.
It takes up the full width available and creates a new line after it.

-- ftd.text:
display: inline
border-color: $yellow-red
border-width.px: 2

This is an inline element.
It flows with the text and does not create a new line.

-- ftd.text: This is another inline text
display: inline
border-color: $yellow-red
border-width.px: 2

-- ftd.text:
display: inline-block
border-color: $yellow-red
border-width.px: 2

This is an inline-block element.
It takes up only the necessary width required by its content
and allows other elements to appear on the same line.

-- ftd.text: This is another inline-block text
display: inline-block
border-color: $yellow-red
border-width.px: 2

-- end: ftd.container
Output
This is a block element. It takes up the full width available and creates a new line after it.
This is an inline element. It flows with the text and does not create a new line.
This is another inline text
This is an inline-block element. It takes up only the necessary width required by its content and allows other elements to appear on the same line.
This is another inline-block text

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!
⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!
💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
Copyright © 2023 - FifthTry.com