Skip to content

Styles

Jump to bottom
Edison Hua edited this page Oct 2, 2022 · 14 revisions

Syntax

The following examples will use string notation such as:

TextRender("strings are better", "time: 3000") ; Descriptive
TextRender("strings are better", "t: 3000")    ; Short form
TextRender("strings are better", "t3000")      ; Not recommended

but object notation does exist.

TextRender("objects are better", {time: 3000}) ; Descriptive
TextRender("objects are better", {t: 3000})    ; Short form overrides any descriptive properties

Feel free to pick whichever notation you prefer

TextRender("The choice is yours", "time: 3000, color: random, y: 12%")     ; String Notation
TextRender("The choice is yours", {time: 3000, color: "random", y: "83%"}) ; Object Notation

TextRender has been designed to be as compatible with CSS4 syntax as possible.

Units

px - pixel. Generally the default unit if omitted.

vh - 1% of viewport height. (0.01 * A_ScreenHeight)

vw - 1% of viewport width. (0.01 * A_ScreenWidth)

vmin - viewport width or the viewport height, whichever is smaller.

% - percent. Defined as relative to a specific measurement, unique to each style.

pt - point. Used for font sizes only.

When units are omitted they default to pixels unless otherwise specified.

Background Style

Anything in text is a valid option.

t, time - The amount of time to display text on the screen. The units can be in days, hours, minutes, seconds, or milliseconds. Built-in options include auto which uses a metric of 200 words per minute, and fast which is useful for lingering text on screen. Examples: t:6hours, t:12min, or t:auto. Default value: None. Default unit: milliseconds.

; When the time parameter is set, assignment to a variable is optional.
TextRender("a fleeting memory...", "t: 3seconds")

; Fast uses a simple formula to determine how long the average person takes to read the text.
TextRender("a fleeting memory...", "t: fast")

a, anchor - Specifies the bias of the origin point. The background box is usually anchored to the top-left (x, y) coordinate. When this value is changed, the given (x, y) coordinate can be used to anchor any combination of top, right, bottom, right, and center. Useful for relocating the baseline from the top-left coordinate of the drawing to the bottom-left. The values 1-9 can also be used. Examples: a:bottom-right, a:bottomright, a:center-center. Default value: a:top-left.

x, left - The x coordinate. Usually an value given in pixels. The words left, center, and right can be used to place the box in those positions respectively. A percentage unit will refer to a percentage of the maximum screen width. Examples: x:500px, x:right, x:12%, or x:33vw. Default value: x:center. Default unit: pixels.

y, top - The y coordinate. Usually an value given in pixels. The words top, center, and bottom can be used to place the box in those positions respectively. A percentage unit will refer to a percentage of the maximum screen height. Examples: y:200px, y:bottom, y:83%, or y:75vh. Default value: y:center. Default unit: pixels.

w, width - The width of the box. A percentage unit will refer to a percentage of the maximum screen width. Examples: w:12px, w:67%, w:10vmin. Default value: simulated width of the text string. Default unit: pixels.

h, height - The height of the box. A percentage unit will refer to a percentage of the maximum screen height. Examples: h:10vh, h:10%, h:92vmin. Default value: simulated height of the text string. Default unit: pixels.

r, radius - Enables rounded corners. The value given describes the radius. A percentage unit is defined as the percentage of the smaller of the width or height. Examples: r:16px, r:2%, r:5vmin. Default value: disabled, a.k.a. pointy square corners. Default unit: pixels.

c, color - Set background color. This can be a color name defined in CSS such as Aquamarine. There are also 3 random color modes, Random which is a mostly opaque random color, Random2 a solid random color, and Random3 a completely random value affecting both transparency and RGB. The words Off, Transparent, Clear, and None will disable the background box as well as any color with a zeroed alpha value. Any integer or hexadecimal value may be passed. An RGB value will be converted to a solid ARGB color. Examples: c:White, c:#ABCABC, c:FF545454, c:0xFAF0E6, c:Random2, c:None. Default value: c:0xDD212121.

m, margin - The margin extends outwards from the background box. Each margin edge can be extended individually, similar to CSS. A percentage unit is defined as a percentage of the corresponding width or height. In the case that only one margin value is specified, it will be a percentage of the height only. Examples: m:5vmin, m:20px. Default value: 1vmin. Default unit: pixels.

  • m:(25px 50px) - Top and bottom margins are 25px; right and left margins are 50px.
  • m:(25px 50px 75px) - Top margin is 25px. Right and left margins are 50px. Bottom margin is 75px.
  • m:(25px 50px 75px 100px) - Top margin is 25px. Right margin is 50px. Bottom margin is 75px. Left margin is 100px.
  • m:(top:25px right:50px bottom:75px left:100px) - Top margin is 25px. Right margin is 50px. Bottom margin is 75px. Left margin is 100px.

Text Style

t, time - See above. A time value defined here will have lower precedence than above.

a, anchor - Sets the anchor point of the text field. See above.

x, left - The x coordinate of the text field. See above. (% of background width) left, center, right, 10vw

y, top - The y coordinate of the text field. See above. (% of background height) top, center, bottom, 10vh

w, width - The width of the text field. See above. (% of background width)

h, height - The height of the text field. See above. (% of background height)

m, margin - The margin extends outwards from the text field. See above. (% of background width) 2vw, 2%

f, font - Set font. f:(avant garde itc)

s, size - Set font size. (% of A_ScreenHeight) 12pt

c, color - Set font color. See above. Salmon, SlateBlue, 0x2736df, 0xff2736df, #2736df Please see:

b, bold - Bold text. Examples: b:1, b:true. Default value: None.

i, italic - Italicize text. Examples: i:1, i:true. Default value: None.

u, underline - Underline text. Examples: u:1, u:true. Default value: None.

j, justify - Justify text. One of the words left, center, or right. Can also be a value from 1-3. Examples: j:left, j:center, or j:right. Default value: j:center

v, vertical - Vertical alignment. Justifies text in the vertical direction. One of the words top, center, or bottom. Can also be a value from 1-3. Examples: v:top, v:center, or v:bottom. Default value: v:top

n, noWrap - Disable text wrapping. Text wrapping is when a line that extends past the right boundary of a text field will be shown as the second line of the text. To only use the newline character to delimit lines use: n:1, n:true

z, condensed - Used when there is a narrow version of the same font. For example: f:(Arial) z:(Arial Narrow). When the regular font would render outside of the screen area, the narrow font is substituted instead.

d, dropshadow -

  • horizontal:50px - denotes the horizontal offset.
  • vertical:50px - denotes the vertical offset.
  • blur:5px - blurs by 5 pixels (radius)
  • color:Black - changes color to black.
  • opacity:0.5 - opacity is at 50%. you might want to do 50% if you like integers.
  • size:10px - extends the edges by 10 pixels.

Example: dropshadow:(h:50px v:50px b:5px c:Black o:50% s:10px)

Based on: https://www.w3schools.com/css/css3_shadows.asp

o, outline -

  • stroke:1px - a one pixel outline does wonders to increase the readability of text without changing the font size.
  • color:Blue - outline color.
  • glow:7px - extends the edge (counting from the end of the outline) and creates a glow of 7pixels. Try to use a value of 5 pixels or less if you want fast rendering.
  • tint:Purple - specifies the glow tint. This will give the glow a unique color.

Example: outline:(stroke:1px color:Blue glow:7px tint:purple)

q, quality - Set text quality value as defined by the TextRenderingHint enumeration. A value from 0 to 5. By default, cleartype (5) is used for all opaque background colors, and AntiAlias (4) is used for all transparent background colors. Examples: q:1. Default value: q:4.

Clone this wiki locally