From 36bb3b98e1826f4d2dcac715974c8b58b9dd7f83 Mon Sep 17 00:00:00 2001 From: 0xDEADFED5 Date: Fri, 5 Jul 2024 04:21:43 -0700 Subject: [PATCH 1/4] fix Understanding Color Tags link, add true color information --- docs/source/Concepts/Colors.md | 43 ++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/docs/source/Concepts/Colors.md b/docs/source/Concepts/Colors.md index 1b0a9b9c24..6a20e48fd1 100644 --- a/docs/source/Concepts/Colors.md +++ b/docs/source/Concepts/Colors.md @@ -56,7 +56,7 @@ For the webclient, Evennia will translate the codes to CSS tags. |\|X | normal black foreground color | | \|\[# | background colours, e.g. \|\[c for bright cyan background and \|\[C a normal cyan background. | | \|!# | foreground color that inherits brightness from previous tags. Always uppcase, like \|!R | -| \|h | make any following foreground ANSI colors bright (no effect on Xterm colors). Use with \|!#. Technically, \|h\|G == \|g. | +| \|h | make any following foreground ANSI colors bright (also known as bold, no effect on Xterm colors). Use with \|!#. Technically, \|h\|G == \|g. | | \|H | negates the effects of \|h, return foreground to normal (no effect on Xterm colors) | | \|/ | line break. Use instead of Python \\n when adding strings from in-game. | | \|- | tab character when adding strings in-game. Can vay per client, so usually better with spaces. | @@ -126,14 +126,14 @@ actually change the background color instead of the foreground: ``` |*reversed text |!R now BG is red. ``` -For a detailed explanation of these caveats, see the [Understanding Color Tags](Understanding-Color- -Tags) tutorial. But most of the time you might be better off to simply avoid `|*` and mark your text +For a detailed explanation of these caveats, see the [Understanding Color Tags](../Howtos/Tutorial\-Understanding\-Color\-Tags.md) +tutorial. But most of the time you might be better off to simply avoid `|*` and mark your text manually instead. ## Xterm256 Colours ```{sidebar} -See the [Understanding Color Tags](../Howtos/Tutorial-Understanding-Color-Tags.md) tutorial, for more on the use of ANSI color tags and the pitfalls of mixing ANSI and Xterms256 color tags in the same context. +See the [Understanding Color Tags](../Howtos/Tutorial\-Understanding\-Color\-Tags.md) tutorial, for more on the use of ANSI color tags and the pitfalls of mixing ANSI and Xterms256 color tags in the same context. ``` The _Xterm256_ standard is a colour scheme that supports 256 colours for text and/or background. It can be combined freely with ANSI colors (above), but some ANSI tags don't affect Xterm256 tags. @@ -173,3 +173,38 @@ If you have a client that supports Xterm256, you can use to get a table of all the 256 colours and the codes that produce them. If the table looks broken up into a few blocks of colors, it means Xterm256 is not supported and ANSI are used as a replacement. You can use the `options` command to see if xterm256 is active for you. This depends on if your client told Evennia what it supports - if not, and you know what your client supports, you may have to activate some features manually. + +## 24-bit Colors (True color) + +```{sidebar} +See the [Wikipedia entry on web colors](https://en.wikipedia.org/wiki/Web_colors) for more detailed information on this color format. +``` + +Some clients support 24-bit colors. This is also called [true color](https://en.wikipedia.org/wiki/Color_depth#True_color_(24-bit)). +Not all clients support true color, they will instead see the closest equivalent. It's important to bear in mind that things may look quite +different from what you intended if you use subtle gradations in true color and it's viewed with a client that doesn't support true color. +The hexadecimal color codes used here are the same ones used in web design. + + +| Tag | Effect | +| -------- | ---- | +| \|###### | foreground RGB (red/green/blue), 6-digit hexadecimal format. | +| \|\[###### | background RGB | +| \|### | foreground RGB (red/green/blue), 3-digit hexadecimal format. | +| \|\[### | background RGB | + +Some 6-digit examples: + +| Tag | Effect | +| -------- | ---- | +| \|#ff0000 | bright red | +| \|#00ff00 | bright green | +| \|#0000ff | bright blue | + +Some 3-digit examples: + +| Tag | Effect | +| ---- | ---- | +| \|#f00 | bright red | +| \|#0f0 | bright green | +| \|#00f | bright blue | \ No newline at end of file From 56cc738aab439afd243f27fef3c579d4cf8acae9 Mon Sep 17 00:00:00 2001 From: 0xDEADFED5 Date: Fri, 5 Jul 2024 15:03:32 -0700 Subject: [PATCH 2/4] typo fix + clarification --- docs/source/Concepts/Colors.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/source/Concepts/Colors.md b/docs/source/Concepts/Colors.md index 6a20e48fd1..8311a0b205 100644 --- a/docs/source/Concepts/Colors.md +++ b/docs/source/Concepts/Colors.md @@ -188,10 +188,10 @@ The hexadecimal color codes used here are the same ones used in web design. | Tag | Effect | | -------- | ---- | -| \|###### | foreground RGB (red/green/blue), 6-digit hexadecimal format. | -| \|\[###### | background RGB | -| \|### | foreground RGB (red/green/blue), 3-digit hexadecimal format. | -| \|\[### | background RGB | +| \|#$$$$$$ | foreground RGB (red/green/blue), 6-digit hexadecimal format, where $ = 0-F | +| \|\[#$$$$$$ | background RGB | +| \|#$$$ | foreground RGB (red/green/blue), 3-digit hexadecimal format. | +| \|\[#$$$ | background RGB | Some 6-digit examples: From 3f5f4237d49fc64a2abb9475549111fa7e251cbf Mon Sep 17 00:00:00 2001 From: 0xDEADFED5 Date: Fri, 5 Jul 2024 22:03:42 -0700 Subject: [PATCH 3/4] be explicit about foreground/background + additional example --- docs/source/Concepts/Colors.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/source/Concepts/Colors.md b/docs/source/Concepts/Colors.md index 8311a0b205..3e0f6c6a14 100644 --- a/docs/source/Concepts/Colors.md +++ b/docs/source/Concepts/Colors.md @@ -197,14 +197,16 @@ Some 6-digit examples: | Tag | Effect | | -------- | ---- | -| \|#ff0000 | bright red | -| \|#00ff00 | bright green | -| \|#0000ff | bright blue | +| \|#ff0000 | bright red foreground| +| \|#00ff00 | bright green foreground| +| \|#0000ff | bright blue foreground| +| \|#\[ff0000 | bright red background| Some 3-digit examples: | Tag | Effect | | ---- | ---- | -| \|#f00 | bright red | -| \|#0f0 | bright green | -| \|#00f | bright blue | \ No newline at end of file +| \|#f00 | bright red foreground| +| \|#0f0 | bright green foreground| +| \|#00f | bright blue foreground| +| \|\[#f00 | bright red background| \ No newline at end of file From 404e8e7b79b5782c34a235e91c14b4f8d54846ba Mon Sep 17 00:00:00 2001 From: 0xDEADFED5 Date: Mon, 8 Jul 2024 16:44:15 -0700 Subject: [PATCH 4/4] document existing underline tag, add info for underline reset, italic, strikethrough. change bold/highlite description --- docs/source/Concepts/Colors.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/source/Concepts/Colors.md b/docs/source/Concepts/Colors.md index 3e0f6c6a14..d50eda3aea 100644 --- a/docs/source/Concepts/Colors.md +++ b/docs/source/Concepts/Colors.md @@ -56,8 +56,14 @@ For the webclient, Evennia will translate the codes to CSS tags. |\|X | normal black foreground color | | \|\[# | background colours, e.g. \|\[c for bright cyan background and \|\[C a normal cyan background. | | \|!# | foreground color that inherits brightness from previous tags. Always uppcase, like \|!R | -| \|h | make any following foreground ANSI colors bright (also known as bold, no effect on Xterm colors). Use with \|!#. Technically, \|h\|G == \|g. | -| \|H | negates the effects of \|h, return foreground to normal (no effect on Xterm colors) | +| \|h | make any following foreground ANSI colors bright (for Xterm256/true color makes the font bold if client supports it). Use with \|!#. Technically, \|h\|G == \|g. | +| \|H | negates the effects of \|h | +| \|u | underline font if client supports it | +| \|U | negates the effects of \|u | +| \|i | italic font if client supports it | +| \|I | negates the effects of \|i | +| \|s | strikethrough font if client supports it | +| \|S | negates the effects of \|s | | \|/ | line break. Use instead of Python \\n when adding strings from in-game. | | \|- | tab character when adding strings in-game. Can vay per client, so usually better with spaces. | | \|_ | a space. Only needed to avoid auto-cropping at the end of a in-game input |