freya_elements/attributes/font_style_attributes.rs
1use crate::def_attribute;
2
3def_attribute!(
4
5 /// The `color` attribute lets you specify the color of the text.
6 ///
7 /// You can learn about the syntax of this attribute in [`Color Syntax`](crate::_docs::color_syntax).
8 ///
9 /// ### Example
10 ///
11 /// ```rust, no_run
12 /// # use freya::prelude::*;
13 /// fn app() -> Element {
14 /// rsx!(
15 /// label {
16 /// color: "green",
17 /// "Hello, World!"
18 /// }
19 /// )
20 /// }
21 /// ```
22 ///
23 /// Another example showing [inheritance](crate::_docs::inheritance):
24 ///
25 /// ```rust, no_run
26 /// # use freya::prelude::*;
27 /// fn app() -> Element {
28 /// rsx!(
29 /// rect {
30 /// color: "blue",
31 /// label {
32 /// "Hello, World!"
33 /// }
34 /// }
35 /// )
36 /// }
37 /// ```
38 color,
39
40 /// You can specify the size of the text using `font_size`.
41 ///
42 /// ### Example
43 ///
44 /// ```rust, no_run
45 /// # use freya::prelude::*;
46 /// fn app() -> Element {
47 /// rsx!(
48 /// label {
49 /// font_size: "50",
50 /// "Hellooooo!"
51 /// }
52 /// )
53 /// }
54 /// ```
55 font_size,
56
57 /// With the `font_family` you can specify what font you want to use for the inner text.
58 ///
59 /// Check out the [custom font example](https://github.com/marc2332/freya/blob/main/examples/custom_font.rs)
60 /// to see how you can load your own fonts.
61 ///
62 /// <!-- TODO: Example of checking if a font exists with skia_safe -->
63 ///
64 /// ### Example
65 ///
66 /// ```rust, no_run
67 /// # use freya::prelude::*;
68 /// fn app() -> Element {
69 /// rsx!(
70 /// label {
71 /// font_family: "Inter",
72 /// "Hello, World!"
73 /// }
74 /// )
75 /// }
76 /// ```
77 font_family,
78
79 /// You can choose a style for a text using the `font_style` attribute.
80 ///
81 /// Accepted values:
82 ///
83 /// - `upright` (default)
84 /// - `italic`
85 /// - `oblique`
86 ///
87 /// ### Example
88 ///
89 /// ```rust, no_run
90 /// # use freya::prelude::*;
91 /// fn app() -> Element {
92 /// rsx!(
93 /// label {
94 /// font_style: "italic",
95 /// "Hello, italic World!"
96 /// }
97 /// )
98 /// }
99 /// ```
100 ///
101 /// You can also specify multiple fonts in order of priority, if one is not found it will fallback to the next one.
102 ///
103 /// Example:
104 ///
105 /// ```rust, no_run
106 /// # use freya::prelude::*;
107 /// fn app() -> Element {
108 /// rsx!(
109 /// label {
110 /// font_family: "DoesntExist Font, Impact",
111 /// "Hello, World!"
112 /// }
113 /// )
114 /// }
115 /// ```
116 font_style,
117
118 /// You can choose a weight for text using the `font_weight` attribute.
119 ///
120 /// Accepted values:
121 ///
122 /// - `invisible`
123 /// - `thin`
124 /// - `extra-light`
125 /// - `light`
126 /// - `normal` (default)
127 /// - `medium`
128 /// - `semi-bold`
129 /// - `bold`
130 /// - `extra-bold`
131 /// - `black`
132 /// - `extra-black`
133 /// - `50`
134 /// - `100`
135 /// - `200`
136 /// - `300`
137 /// - `400`
138 /// - `500`
139 /// - `600`
140 /// - `700`
141 /// - `800`
142 /// - `900`
143 /// - `950`
144 ///
145 /// ### Example
146 ///
147 /// ```rust, no_run
148 /// # use freya::prelude::*;
149 /// fn app() -> Element {
150 /// rsx!(
151 /// label {
152 /// font_weight: "bold",
153 /// "Hello, bold World!"
154 /// }
155 /// )
156 /// }
157 /// ```
158 font_weight,
159
160 /// You can choose a width for a text using the `font_width` attribute.
161 ///
162 /// ⚠️ Only fonts with variable widths will be affected.
163 ///
164 /// Accepted values:
165 ///
166 /// - `ultra-condensed`
167 /// - `extra-condensed`
168 /// - `condensed`
169 /// - `normal` (default)
170 /// - `semi-expanded`
171 /// - `expanded`
172 /// - `extra-expanded`
173 /// - `ultra-expanded`
174 ///
175 /// ### Example
176 ///
177 /// ```rust, no_run
178 /// # use freya::prelude::*;
179 /// fn app() -> Element {
180 /// rsx!(
181 /// label {
182 /// font_width: "ultra-expanded",
183 /// "Hello, wide World!"
184 /// }
185 /// )
186 /// }
187 /// ```
188 font_width,
189
190 /// You can change the alignment of the text using the `text_align` attribute.
191 ///
192 /// Accepted values:
193 ///
194 /// - `center`
195 /// - `end`
196 /// - `justify`
197 /// - `left` (default)
198 /// - `right`
199 /// - `start`
200 ///
201 /// ### Example
202 ///
203 /// ```rust, no_run
204 /// # use freya::prelude::*;
205 /// fn app() -> Element {
206 /// rsx!(
207 /// label {
208 /// text_align: "right",
209 /// "Hello, World!"
210 /// }
211 /// )
212 /// }
213 /// ```
214 text_align,
215
216 /// ### line_height
217 ///
218 /// Specify the height of the lines of the text.
219 ///
220 /// ### Example
221 ///
222 /// ```rust, no_run
223 /// # use freya::prelude::*;
224 /// fn app() -> Element {
225 /// rsx!(
226 /// label {
227 /// line_height: "3",
228 /// "Hello, World! \n Hello, again!"
229 /// }
230 /// )
231 /// }
232 /// ```
233 line_height,
234
235 /// Specify the shadow of a text.
236 ///
237 /// Syntax: `<x> <y> <size> <color>`
238 ///
239 /// ### Example
240 ///
241 /// ```rust, no_run
242 /// # use freya::prelude::*;
243 /// fn app() -> Element {
244 /// rsx!(
245 /// label {
246 /// text_shadow: "0 18 12 rgb(0, 0, 0)",
247 /// "Hello, World!"
248 /// }
249 /// )
250 /// }
251 /// ```
252 text_shadow,
253
254 /// Determines the amount of lines that the text can have. It has unlimited lines by default.
255 ///
256 /// ### Example
257 ///
258 /// ```rust, no_run
259 /// # use freya::prelude::*;
260 /// fn app() -> Element {
261 /// rsx!(
262 /// label {
263 /// "Hello, World! \n Hello, World! \n Hello, world!" // Will show all three lines
264 /// }
265 /// label {
266 /// max_lines: "2",
267 /// "Hello, World! \n Hello, World! \n Hello, world!" // Will only show two lines
268 /// }
269 /// )
270 /// }
271 /// ```
272 max_lines,
273
274 /// Specify the decoration in a text.
275 ///
276 /// Accepted values:
277 ///
278 /// - `underline`
279 /// - `line-through`
280 /// - `overline`
281 ///
282 /// ### Example
283 ///
284 /// ```rust, no_run
285 /// # use freya::prelude::*;
286 /// fn app() -> Element {
287 /// rsx!(
288 /// label {
289 /// decoration: "line-through",
290 /// "Hello, World!"
291 /// }
292 /// )
293 /// }
294 /// ```
295 decoration,
296
297 /// Specify the decoration's style in a text.
298 ///
299 /// Accepted values:
300 ///
301 /// - `solid` (default)
302 /// - `double`
303 /// - `dotted`
304 /// - `dashed`
305 /// - `wavy`
306 ///
307 /// ### Example
308 ///
309 /// ```rust, no_run
310 /// # use freya::prelude::*;
311 /// fn app() -> Element {
312 /// rsx!(
313 /// label {
314 /// decoration: "line-through",
315 /// decoration_style: "dotted",
316 /// "Hello, World!"
317 /// }
318 /// )
319 /// }
320 /// ```
321 decoration_style,
322
323 /// Specify the decoration’s color in a text.
324 ///
325 /// You can learn about the syntax of this attribute in [`Color Syntax`](crate::_docs::color_syntax).
326 ///
327 /// ### Example
328 ///
329 /// ```rust, no_run
330 /// # use freya::prelude::*;
331 /// fn app() -> Element {
332 /// rsx!(
333 /// label {
334 /// decoration: "line-through",
335 /// decoration_color: "orange",
336 /// "Hello, World!"
337 /// }
338 /// )
339 /// }
340 /// ```
341 decoration_color,
342
343 /// Determines how text is treated when it exceeds its [`max_lines`](#max_lines) count. By default uses the `clip` mode, which will cut off any overflowing text, with `ellipsis` mode it will show `...` at the end.
344 ///
345 /// Accepted values:
346 ///
347 /// - `clip` (default): Simply cut the text.
348 /// - `ellipsis`: Show `…`.
349 /// - `[custom-value]: Show a custom value.
350 ///
351 /// ### Ellipsis example
352 ///
353 /// ```rust, no_run
354 /// # use freya::prelude::*;
355 /// fn app() -> Element {
356 /// rsx!(
357 /// label {
358 /// max_lines: "3",
359 /// text_overflow: "ellipsis",
360 /// "Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"
361 /// }
362 /// )
363 /// }
364 /// ```
365 ///
366 /// ### Custom value example
367 ///
368 /// ```rust, no_run
369 /// # use freya::prelude::*;
370 /// fn app() -> Element {
371 /// rsx!(
372 /// label {
373 /// max_lines: "3",
374 /// text_overflow: ".......too long.",
375 /// "Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"
376 /// }
377 /// )
378 /// }
379 /// ```
380 text_overflow,
381
382 /// Specify the spacing between characters of the text.
383 ///
384 /// ### Example
385 ///
386 /// ```rust, no_run
387 /// # use freya::prelude::*;
388 /// fn app() -> Element {
389 /// rsx!(
390 /// label {
391 /// letter_spacing: "10",
392 /// "Hello, World!"
393 /// }
394 /// )
395 /// }
396 /// ```
397 letter_spacing,
398
399 /// Specify the spacing between words of the text.
400 ///
401 /// ### Example
402 ///
403 /// ```rust, no_run
404 /// # use freya::prelude::*;
405 /// fn app() -> Element {
406 /// rsx!(
407 /// label {
408 /// word_spacing: "10",
409 /// "Hello, World!"
410 /// }
411 /// )
412 /// }
413 /// ```
414 word_spacing,
415
416 /// Specify the text height behavior.
417 ///
418 /// Accepted values:
419 ///
420 /// - `disable-all` (default)
421 /// - `all`
422 /// - `disable-first-ascent`
423 /// - `disable-least-ascent`
424 ///
425 /// ### Example
426 ///
427 /// ```rust, no_run
428 /// # use freya::prelude::*;
429 /// fn app() -> Element {
430 /// rsx!(
431 /// label {
432 /// text_height: "disable-all",
433 /// "Hello, World!"
434 /// }
435 /// )
436 /// }
437 /// ```
438 text_height,
439);