Jump to content

Transformation of text: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
Examples: <span style="{{Transform-rotate|180}}">{{7seg|0}}{{7seg|7}}{{7seg|7}}{{7seg|3}}{{7seg|4}}</span>,
 
(122 intermediate revisions by 68 users not shown)
Line 1: Line 1:
{{original research|date=August 2011}}
{{original research|date=August 2011}}
{{refimprove|date=January 2009}}
{{more citations needed|date=January 2009}}
'''Transformation of text''' is strategies to perform [[transformation (geometry)|geometric transformations]] on text (reversals, rotations, etc.), particularly in systems that do not natively support transformation, such as [[HTML]], [[seven-segment display]]s and [[plain text]].
'''Transformations of text''' are strategies to perform [[transformation (geometry)|geometric transformations]] on text (reversal, rotations, etc.), particularly in systems that do not natively support transformation, such as [[HTML]], [[seven-segment display]]s and [[plain text]].


==Implementation==
==Implementation==


Many systems, such as HTML, seven-segment displays and plain text, do not support transformation of text. In the case of HTML, this limitation in display may eventually be addressed through standard [[cascading style sheets]] (CSS), since proposed specifications for [[CSS3]] include rotation for block elements.<ref name="w3.org">{{cite web|url=http://www.w3.org/TR/css3-box/#rotating |title=CSS basic box model |publisher=[[W3C]] |date=August 9, 2007 |accessdate=2012-11-19 |editor=Bert Bos}}</ref> In the meantime, several ways of producing the visual effects of text transformations have come into use.
Many systems, such as HTML, seven-segment displays and plain text, do not support transformation of text. In the case of HTML, this limitation in display may eventually be addressed through standard [[cascading style sheets]] (CSS), since proposed specifications for [[CSS3]] include rotation for block elements.<ref name="w3.org">{{cite web|url=http://www.w3.org/TR/css3-box/#rotating |title=CSS basic box model |publisher=[[W3C]] |date=August 9, 2007 |accessdate=2012-11-19 |editor=Bert Bos}}</ref> In the meantime, several ways of producing the visual effects of text transformations have come into use.
{{clear}}
{{Box|Rotated text|header=Text rotated 90º using CSS|align=right|style={{transform-rotate|90}}}}
{{Box|Mirrored text|header=Horizontally mirrored text using CSS|style={{MirrorH}}}}
{{Box|Mirrored text|header=Vertically mirrored text using CSS|style={{MirrorV}}}}
{{Clear}}


The most common of these transformations are [[rotation (geometry)|rotation]] and [[reflection (geometry)|reflection]].
The most common of these transformations are [[rotation (geometry)|rotation]] and [[reflection (geometry)|reflection]].


[[Unicode]] supports a variety of characters that resemble transformed characters, primarily for various forms of [[phonetic transcription]]. Each of these character names indicates what kind of transformation the characters have undergone:
[[Unicode]] supports a variety of characters that resemble transformed characters, primarily for various forms of [[phonetic transcription]]. Each of these character names indicates what kind of transformation the characters have undergone:


*Reversed characters, those that have been reflected in a vertical line (i.e., flipped horizontally);
*Reversed characters, those that have been reflected in a vertical line, or flipped horizontally, like certain [[Cyrillic script]] letters;
*Inverted characters, those that have been reflected on a horizontal line (i.e., flipped vertically, only one letter has been done this way);
*Inverted characters, those that have been reflected on a horizontal line (i.e., flipped vertically, only one letter has been done this way);
*Turned characters, those that have been rotated 180 degrees and thus appear upside-down (this is the most common);
*Turned characters, those that have been rotated 180 degrees and thus appear upside-down (this is the most common);
*Sideways characters, those that have been rotated 90 degrees counterclockwise (generally the least supported, and used only for a handful of vowels in the [[Uralic Phonetic Alphabet]] system).
*Sideways characters, those that have been rotated 90 degrees counterclockwise (generally the least supported, and used only for a handful of vowels in the [[Uralic Phonetic Alphabet]] system).



===Upside-down text===
===Upside-down text===
{{original research|section|date=June 2015}}
{{original research|section|date=June 2015}}
Strategies can be used to render words upside down in languages such as [[HTML]] that do not permit [[rotation (geometry)|rotation]] of text; using Unicode characters (especially those in the [[International Phonetic Alphabet]]), a very close approximation of '''upside-down text''' (also called '''flip text''') can be achieved. The letters s, x, z and o are [[rotational symmetry|rotationally symmetrical]], while pairs such as b/q, d/p and n/u are rotations of each other. The rest of the letters have been encoded into the Unicode IPA section, creating a full set of upside-down lowercase letters. With the addition of the [[Fraser alphabet]] to the Unicode standard in version 5.2, full (or at least near-full) support for upside-down capital letters is now available. Number support is incomplete; four numbers are universally [[strobogrammatic number|strobogrommatic]] (0, 8, and 6/9), and the upside-down versions of numbers 2 and 3 have been provisionally assigned Unicode points for use in [[duodecimal|dozenal notation]]; however, other numbers still are not supported. Punctuation (by use of such characters as the [[interpunct]] and the [[inverted question mark and exclamation point]]) is mostly covered. Several Internet utilities exist for the transformation of regular text to (and sometimes from) upside-down text; each has its own slightly different algorithm for letters not precisely or well covered. A list of converters and algorithms can be found at [[#Comparison of algorithms|the list below]].
Strategies can be used to render words upside down in languages such as [[HTML]] that do not permit [[rotation (geometry)|rotation]] of text; using Unicode characters (especially those in the [[International Phonetic Alphabet|IPA]]), a very close approximation of '''upside-down text''' (also called '''flip text''') can be achieved. The letters s, x, z, and o are [[rotational symmetry|rotationally symmetrical]], while pairs such as b/q, d/p, and n/u are rotations of each other. The rest of the letters have been encoded into the Unicode IPA section, generating a complete set of upside-down lowercase letters. With the addition of the [[Fraser alphabet]] to the Unicode standard in version 5.2, full (or at least near-full) support for upside-down capital letters is now available. Number support is incomplete; four numbers are universally [[strobogrammatic number|strobogrammatic]] (0, 8, and 6/9), and the upside-down versions of numbers 2 and 3 have been provisionally assigned Unicode points for use in [[duodecimal|dozenal notation]]; however, other numbers still are not supported. Punctuation (by use of such characters as the [[interpunct]] and the [[inverted question mark and exclamation point]]) is mostly covered. Several Internet utilities exist for the transformation of regular text to (and sometimes from) upside-down text; each has its own slightly different algorithm for letters not precisely or well covered. A list of converters and algorithms can be found at [[#Comparison of algorithms|the list below]].


A similar process is '''USD encoding''', which uses characters entirely within the [[ASCII]] character set. Because it is almost entirely alphanumeric, it is far more compatible with other programs that do not support Unicode, and more readily typed by hand. However, the text created by using USD encoding is far less legible, and in fact more closely resembles [[Leet]]. Another problem is that because not all letters fit well, the USD algorithms cannot be a complete [[involution (mathematics)|involution]] (i.e., completely convertible back and forth) and contain a complete set of letters at the same time. For instance, the Albartus USD algorithm example seen in the [[#Examples|"Examples" section below]] has k, T, t, and R still in their upright positions. Another issue with USD encoding is the use of [[italic type]]. The letter "a" will, in most typefaces using italic fonts, render it as a "one-story" [[Latin alpha]], thus causing problems with any word using that letter as a lowercase "e." [[Oblique type]] does not have this problem.
A similar process is '''USD encoding''', which uses characters entirely within the [[ASCII]] character set. Because it is almost entirely alphanumeric, it is far more compatible with other programs that do not support Unicode, and more readily typed by hand. However, the text created by using USD encoding is far less legible, and in fact, more closely resembles [[Leet]]. Another problem is that because not all letters fit well, the USD algorithms cannot be a complete [[involution (mathematics)|involution]] (i.e., completely convertible back and forth) and contain a complete set of letters at the same time. For instance, the Albartus USD algorithm example seen in the [[#Examples|"Examples" section below]] has k, T, t, and R still in their upright positions. Another issue with USD encoding is the use of [[italic type]]. The letter "a" will, in most typefaces using italic fonts, render it as a "one-story" [[Latin alpha]], thus causing problems with any word using that letter as a lowercase "e." [[Oblique type]] does not have this problem.


Below is a conversion table that can be used to transform lowercase, uppercase numeric and punctuation output. These characters require unicode version 8.0 minimum (in particular the ᘔ and Ɛ from the [[duodecimal]] block).
Below is a conversion table that can be used to transform lowercase, uppercase numeric and punctuation output. These characters require Unicode version 8.0 minimum (in particular the ᘔ and Ɛ from the [[duodecimal]] block).


{| class="wikitable" id="Upside_Down_Conversion_Table"
{| class="wikitable" id="Upside_Down_Conversion_Table"
Line 42: Line 46:
|[[u]]
|[[u]]
|[[ɯ]]
|[[ɯ]]
|[[l]]
|[[]]
|[[ʞ]]
|[[ʞ]]
|[[ɾ]]
|[[ſ̣]]
|[[ı]]
|[[]]
|[[ɥ]]
|[[Turned h|ɥ]]
|[[ɓ]]
|[[]]
|[[ɟ]]
|[[ɟ]]
|[[ǝ]]
|[[ǝ]]
Line 69: Line 73:
|0075
|0075
|026F
|026F
|A781
|006C
|029E
|029E
|017F+0323
|027E
|1D09
|0131
|0265
|0265
|0253
|0253
Line 86: Line 90:
|[[Letterlike Symbols (Unicode block)|⅄]]
|[[Letterlike Symbols (Unicode block)|⅄]]
|[[X]]
|[[X]]
|[[M]]
|[[𐤵]]
|[[Λ]]
|[[Ʌ]]
|[[]]
|[[Ո]]
|[[]]
|[[]]
|[[S]]
|[[S]]
|[[ꓤ]]
|[[Phonetic symbols in Unicode|ᴚ]]
|[[Ό]]
|[[]]
|[[Ԁ]]
|[[Ԁ]]
|[[O]]
|[[O]]
|[[N]]
|[[N]]
|[[W]]
|[[]]
|[[⅂]]
|[[⅂]]
|[[]]
|[[]]
|[[ſ]]
|[[]]
|[[I]]
|[[I]]
|[[H]]
|[[H]]
Line 105: Line 109:
|[[Ⅎ]]
|[[Ⅎ]]
|[[Ǝ]]
|[[Ǝ]]
|[[ꓷ]]
|[[Unified Canadian Aboriginal Syllabics (Unicode block)|ᗡ]]
|[[Ɔ]]
|[[Ɔ]]
|[[ꓭ]]
|[[Deseret alphabet|𐐒]]
|[[]]
|[[]]
|-
|-
|005A
|005A
|2144
|2144
|0058
|0058
|10935
|004D
|0245
|039B
|0548
|2229
|A7B1
|22A5
|0053
|0053
|A4E4
|1D1A
|A779
|038C
|0500
|0500
|004F
|004F
|004E
|004E
|A7FD
|0057
|A780
|2142
|A7B0
|22CA
|A4E9
|017F
|0049
|0049
|0048
|0048
Line 132: Line 136:
|2132
|2132
|018E
|018E
|A4F7
|15E1
|0186
|0186
|A4ED
|10412
|2C6F
|2200
|-
|-
!rowspan=2|'''[[Number]]s'''
!rowspan=2|'''[[Number]]s'''
Line 141: Line 145:
|[[6 (number)|6]]
|[[6 (number)|6]]
|[[8 (number)|8]]
|[[8 (number)|8]]
|[[Bopomofo|]]
|[[L|𝘓]]
|[[9 (number)|9]]
|[[9 (number)|9]]
|[[Greek alphabet|ϛ]]
|[[Myanmar (Unicode block)|]]
|[[Nko|߈]]
|[[N'Ko script|߈]]
|[[Duodecimal|Ɛ]]
|[[Duodecimal|]]
|[[Duodecimal|]]
|[[Duodecimal|]]
|[[⇂]]
|[[⇂]]
|-
|-
Line 152: Line 156:
|0036
|0036
|0038
|0038
|1D613
|3125
|0039
|0039
|100C
|03DA
|07C8
|07C8
|218B
|218B
Line 183: Line 187:


===Sideways text===
===Sideways text===
Sideways text presents a unique problem. Unlike rotating text 180 degrees, the number of sideways characters falls far short of what would be needed for most purposes, and because text is rendered horizontally, it would be very difficult to render beyond one line of vertical text in a well-aligned manner without columns, especially in proportional fonts (furthermore, each character would require a line break after it). The process of using alternate characters for sideways text is further complicated by the fact that most fonts space letters further apart vertically (to accommodate [[underline|underlining]] and [[overline|overlining]]) than horizontally, and that most fonts are taller than they are wider, making simulated sideways text look significantly more awkward.


Until [[CSS3]] introduced rotation for block elements,<ref name="caniuse">[http://caniuse.com/#feat=transforms2d Can I use... CSS3 transforms]</ref> there was no direct way to rotate text at any direction other than the manual 180-degree method described above. [[Internet Explorer]] offered a proprietary [[Cascading Style Sheets|CSS]] property that rotated text 90 degrees clockwise, which has been revised and incorporated into CSS: <code>&lt;div style="writing-mode:vertical-rl;"&gt;</code> There remain some inconsistencies in how the <code>writing-mode</code> property is implemented; rotation can also cause some issues with a given element's width, height and word wrapping.
Sideways text presents a unique problem. Though it is likely the most practical (as opposed to artistic) form of text transformation, it is the least supported and is the most difficult to implement. Unlike rotating text 180 degrees, the number of sideways characters falls far short of what would be needed for most purposes, and because text is rendered horizontally, it would be very difficult to render beyond one line of vertical text in a well-aligned manner without columns, especially in proportional fonts (furthermore, each character would require a line break after it). The process of using alternate characters for sideways text is further complicated by the fact that most fonts space letters further apart vertically (to accommodate [[underline|underlining]] and [[overline|overlining]]) than horizontally, and that most fonts are taller than they are wider, making simulated sideways text look significantly more awkward.


The most common way around these problems was to use [[image]]s of text, which can then be rotated and transformed in an image editor at will, and to represent the text in those images with the [[alt attribute]] so that search engines and text-only browsers can read it properly. The use of [[ANSI art]] and [[box-drawing character]]s to manually draw sideways text has the advantage of being copiable and pastable (whereas images are not in most plain text situations), but generally creates large characters and is not generally readable by search engines. With the broader adoption of CSS3 by all of the major browsers, these methods are now mostly obsolete for Web media.
[[Internet Explorer]] has a [[Cascading Style Sheets|CSS]] property that will rotate normally entered text 90 degrees clockwise:

:<code>&lt;div style="writing-mode:tb-rl;"&gt;</code>

However, no other major browsers ([[Mozilla Firefox]], [[Opera (web browser)|Opera]] nor [[WebKit]] based browsers) support this writing-mode property. However, all major standards-compliant browsers now support [[CSS3]] rotation for block elements, which makes the visual rotation of HTML text available.<ref name="caniuse">[http://caniuse.com/#feat=transforms2d Can I use... CSS3 transforms]</ref>

The most common way around these problems is to use [[image]]s of text, which can then be rotated and transformed in an image editor at will, and to represent the text in those images with the [[alt attribute]] so that search engines and text-only browsers can read it properly. The use of [[ANSI art]] and [[box-drawing character]]s to manually draw sideways text has the advantage of being copiable and pastable (whereas images are not in most plain text situations), but generally creates large characters.


===Reversed text===
===Reversed text===
Line 201: Line 200:
X-axis symmetry is visible in the letters B, C, D, E, H, I, K, O, X, and in some fonts <span style="font-family:Century Gothic;">a</span> and l, as well as in the pairs of a/<span style="font-family:Arial,sans-serif;">g</span>, b/p, d/q, e/G, and f/t. Expanding to Cyrillic and Greek produces more symmetries, such as Λ/V and Γ/L.
X-axis symmetry is visible in the letters B, C, D, E, H, I, K, O, X, and in some fonts <span style="font-family:Century Gothic;">a</span> and l, as well as in the pairs of a/<span style="font-family:Arial,sans-serif;">g</span>, b/p, d/q, e/G, and f/t. Expanding to Cyrillic and Greek produces more symmetries, such as Λ/V and Γ/L.


The [[Fixedsys Excelsior]] typeface includes a complete set of reversed characters like this in its Private Use Area. However, online utilities to create mirrored text are not readily available, and most sites that claim to "mirror text" or "reverse text" in fact only change the order of the letters and do not actually flip the letters themselves.
The Fixedsys Excelsior typeface includes a complete set of reversed characters like this in its Private Use Area. However, online utilities to create mirrored text are not readily available, and most sites that claim to "mirror text" or "reverse text" in fact only change the order of the letters and do not actually flip the letters themselves.


==Dilated text==
==Dilated text==
Through the use of Unicode's [[small capitals]] and [[subscript and superscript]] [[Phonetic symbols in Unicode|phonetic modifiers]], text can be created that is smaller than the inline text. This is generally only necessary for applications that only support one-size plain text, since HTML and CSS support different text sizes.
Through the use of Unicode's [[small capitals]], [[Small Form Variants|small-form punctuation]], and [[subscript and superscript]] [[Phonetic symbols in Unicode|phonetic modifiers]], text can be created that is smaller than the inline text. This is generally only necessary for applications that only support one-size plain text since HTML and CSS support different text sizes.


==Examples==
==Examples==
{| class="wikitable" style="float:right; line-height:0.8;"

!{{diagonal split header|<br /><br />Year|Name}}
*Artistry, such as representing the two end zones or player designations on an [[American football]] gridiron; e.g. "[[Pittsburgh Steelers|sɹəʅəəʇS ɥɓɹnqsʇʇɪƋ]]"<sup>[http://fullervision.net/superbowl43.html from this example]</sup> or "[[New York Giants|sʇuɐɪ''ŋ'' ʞɹoʎ ʍəN]] ƕ" (note the use of [[hwair]] as a [[dingbat]] of the team's logo)
|ᘏ<br />𝄩<br />ᘏ<br />𝄩
|ᗜ<br />⊂<br />ᔕ<br />⊣<br />⤙
|ᓚ<br />⊂<br />ᗜ<br />𝄩<br />⊣<br />ェ
|ϖ<br />𝄩<br />ᘏ<br />ᘏ<br />ᔕ
|-
!2018
|✔|| || ||✔
|-
!2019
| ||✔|| ||✔
|-
!2020
|✔|| ||✔||✔
|-
|colspan="5" style="line-height:1;"|Example table with sideways<br />text using Unicode characters
|}
*Artistry, such as representing the two end zones or player designations on an [[American football]] gridiron; e.g. "[[Pittsburgh Steelers|sɹəꞁəəʇS ɥᵷɹnqsʇʇᴉԀ]]"<sup>[http://fullervision.net/superbowl43.html from this example]</sup> or {{not a typo|"[[New York Giants|sʇuɐᴉᵷ ʞɹo⅄ ʍəN]] ƕ"}} (note the use of [[hwair]] as a [[dingbat]] of the team's logo).
*[[Emoticon]]s are traditionally drawn sideways in North America.
*[[Emoticon]]s are traditionally drawn sideways in North America.
*Better fit; for instance, rotating column headers on a [[table (HTML)|table]] sideways would produce a more compact table, desirable particularly in tables that contain mostly abbreviations and numeric values.
*Better fit; for instance, rotating column headers on a [[table (HTML)|table]] sideways would produce a more compact table, desirable particularly in tables that contain mostly abbreviations and numeric values.
*[[Faux Cyrillic|Evoking Russian stereotypes]], by flipping certain letters one at a time.
* [[Faux Cyrillic|Evoking Russian stereotypes]], by flipping certain letters one at a time.
*Evoking simplicity, such as childlike confusion over the direction of a letter (e.g., "[[Toys R Us|Toys Я Us]]") or to indicate vulgarity (such as the wordmark for [[Korn|KoЯn]]).
* Evoking simplicity, such as childlike confusion over the direction of a letter (e.g., "[[Toys R Us|Toys Я Us]]").
*[[Symmetry]], such as in the wordmarks for [[Nine Inch Nails]] (NIИ), [[ABBA]] (ᗅᗺᗷᗅ), or ''[[The Rush Limbaugh Show]]'' "EIB" slogan (εıз). The use of transformation in this fashion is known as an ''[[ambigram]]''.
* [[Symmetry]], such as in the wordmarks for [[Nine Inch Nails]] (NIИ), [[ABBA]] (AꓭBA), or ''[[The Rush Limbaugh Show]]'' "EIB" slogan (εıз). The use of transformation in this fashion is known as an ''[[ambigram]]''.
*[[Calculator spelling]] on seven-segment displays, where numbers represent letters upside down (e.g. <span style="font-family:OCR A Extended,OCR-A II;">07734</span>, "hello").
* [[Calculator spelling]] on seven-segment displays, where numbers represent letters upside down (e.g. <span style="font-family:OCR A Extended,OCR-A II;">07734</span>, <span style="{{Transform-rotate|180}}">{{7seg|0}}{{7seg|7}}{{7seg|7}}{{7seg|3}}{{7seg|4}}</span>, "hello").
*Emulating the [[boustrophedon]] style of writing, where alternating lines are written in opposite directions.
* Emulating the [[boustrophedon]] style of writing, where alternating lines are written in opposite directions.
*[[Pentomino]]es and [[tetromino]]es resemble (and are traditionally named after) Latin letters, and the rotation of these letterlike objects forms the basis of several games, including [[Tetris]].
* [[Pentomino]]es and [[tetromino]]es resemble (and are traditionally named after) Latin letters, and the rotation of these letterlike objects forms the basis of several games, including [[Tetris]].
*Though not strict transformation, the substitution of a plural "s" with its near-reflection "z" is a fairly common [[trope (literature)|trope]] among some minor league [[team sport|sports teams]] in the United States, in order to make team names seem more modern.
* Though not strict transformation, the substitution of a plural "s" with its near-reflection "z" is a fairly common [[trope (literature)|trope]] among some minor league [[team sport|sports teams]] in the United States, in order to make team names seem more modern.
*Basic [[encryption]], to "hide" the answer to a joke or puzzle, for instance:
* Basic [[encryption]], to "hide" the answer to a joke or puzzle, for instance:


:Question: How can you tell an introvert from an extrovert?
:Question: How can you tell an introvert from an extrovert?
:Answer: <span style="font-family:lucida sans unicode, lucida grande;">˙sǝoɥs s,ʎnƃ ɹǝɥʇo ǝɥʇ ʇɐ sʞool ʇɹǝʌoɹʇxǝ ǝɥʇ 'sɹoʇɐʌǝlǝ ǝɥʇ uı</span> (Using the Revfad algorithm)
:Answer: <span style="font-family:lucida sans unicode, lucida grande;">˙sǝoɥs s,ʎnᵷ ɹǝɥʇo ǝɥʇ ʇɐ sʞooꞁ ʇɹǝʌoɹʇxǝ ǝɥʇ 'sɹoʇɐʌǝlǝ ǝɥʇ uı</span> (Using the Revfad algorithm)
:Or: 'saoys s.hn6 R3HTO ayt te skool tJa^oJtxa ayt `sJote^ala ayt uI (using the Albartus USD algorithm)
:Or: 'saoys s.hn6 R3HTO ayt te skool tJa^oJtxa ayt 'sJote^ala ayt uI (using the Albartus USD algorithm)


*In [[baseball scorekeeping]], a player who strikes out despite not swinging at the third strike is indicated in the official score book with a reversed or turned K. It is set to be added to Unicode version 7.0 at U+A7B0 (Ʞ) but can be approximated on devices that do not yet support the character with the obsolete IPA symbol {{unicode|ʞ}}.
*In [[baseball scorekeeping]], a player who strikes out despite not swinging at the third strike is indicated in the official scorebook with a reversed or turned K. It has been added to Unicode in version 7.0 at U+A7B0 (Ʞ).
*On the [[Soundgarden]] album [[Superunknown]], all mention of the album or title track (except in the lyrics booklet) is shown as "{{unicode|Superиmoиʞи∩}}".
*On the [[Soundgarden]] album [[Superunknown]], all mention of the album or title track (except in the lyrics booklet) is shown as "Superиmoиʞи∩".
*The beverage [[7Up]] during the early 2000s had a spin-off counterpart, known as [[dnL]], with a significantly different color and flavor as well as caffeine.
*The beverage [[7Up]] during the early 2000s had a spin-off counterpart, known as [[dnL]], with a significantly different color and flavor as well as caffeine.
*[[Facebook]] added "upside-down English" as a language choice in summer 2009.
*[[Facebook]] added "upside-down English" as a language choice in summer 2009.
Line 233: Line 249:
:Example:<span style="font-family:lucida sans unicode, lucida grande;">...иiɒəɒ иɘqo [[Parallel universe (fiction)|x иoiƨиɘмib]] oɟ lɒɟɿoq ɘнɟ ɟʇɘl γbodɘмoƧ</span> (Somebody left the portal to Dimension X open again...)
:Example:<span style="font-family:lucida sans unicode, lucida grande;">...иiɒəɒ иɘqo [[Parallel universe (fiction)|x иoiƨиɘмib]] oɟ lɒɟɿoq ɘнɟ ɟʇɘl γbodɘмoƧ</span> (Somebody left the portal to Dimension X open again...)


Poet Darius Bacon has written two examples of [[palindrome|palindromic]] poetry that reads the same upside-down as it does upside right.<ref>Bacon, Darius. [http://wry.me/~darius/writings/a-poem.html a poem] and [http://wry.me/~darius/writings/deus-am.html deus am]. The Palindromist #4.</ref>
Poet Darius Bacon has written two examples of [[palindrome|palindromic]] poetry that reads the same upside-down as it does rightside up.<ref>Bacon, Darius. [http://wry.me/~darius/writings/a-poem.html a poem] and [http://wry.me/~darius/writings/deus-am.html deus am]. The Palindromist #4.</ref>


===Russian===
==Comparison of algorithms==

{| class="wikitable"
:Question: How do flamingos get their color?
|-
:Answer: <span style="font-family:lucida sans unicode, lucida grande;">¿ɯǝʚǹ и̯oʚɔ ɯoıɐhʎvou oɹниꟺɐvф 𝼐ɐ𝼐</span>
! Converter
! Lowercase
! Uppercase
! Numbers
! Reconvert<br>Backward
! Reflection
! Character set
! Provides HTML
|-
! [http://flip-o-matic.net Flip-O-Matic]
| {{yes}}
| {{okay|Incomplete}}
| {{okay|Errors}}
| {{yes}}
| {{no}}
| All of [[Unicode]]
| {{no}}, but highly recommended
|-
! [http://cedarcreekit.com/labs/flip_text CedarCreek Labs]
| {{yes}}
| {{yes}}
| {{yes}}
| {{no}}
| {{no}}
| [[Latin characters in Unicode]]
| {{no}}
|-
! [http://www.revfad.com/flip.html Flip]<br><small>(revfad.com)</small>
| {{yes}}
| {{no}}
| {{no}}
| {{yes}}
| {{no}}
| [[Latin characters in Unicode]]
| {{no}}
|-
! [http://www.logarithmic.net/pfh-files/blog/01173253837/rot180.html Rot180]<br><small>(logarithmic.net)</small>
| {{yes}}
| {{yes}}
| {{yes}}
| {{no}}
| {{no}}
| All of [[Unicode]]<br>Uses [[combining character]]s for some
| {{no}}
|-
! [http://www.fliptext.org/ Fliptext.org]
| {{yes}}
| {{no}}
| {{no}}
| {{no}}
| {{no}}
| [[Latin characters in Unicode|Latin]], with one exception
| {{no}}
|-
! [http://www.en.fliptext.net/ Fliptext.net]
| {{yes}}
| {{no}}
| {{yes}}
| {{yes}}
| {{no}}
| Latin for letters<br>all of Unicode for numbers
| {{no}}
|-
! [http://www.fliptext.info/ Fliptext.info]
| {{yes}}
| {{yes}}
| {{no}}
| {{yes}}
| {{no}}
| [[Latin characters in Unicode|Latin]], with one exception
| {{no}}
|-
! [http://www.sevenwires.com/play/UpsideDownLetters.html Upside Down Letters]<br><small>(sevenwires.com)</small>
| {{yes}}
| {{no}}
| {{no}}
| {{yes}}
| {{no}}
| [[Latin characters in Unicode|Latin]], with one exception
| {{no}}
|-
! [http://albartus.googlepages.com/usd USD encoding]<br><small>(albartus.googlepages.com)</small>
| {{okay|Incomplete}}
| {{okay|Incomplete}}
| {{yes}}
| {{yes}}
| {{no}}
| [[ASCII]]
| {{n/a}}
|-
! [http://www.superliminal.com/upsidedown/NQAS.htm NQAS]<br><small>(superliminal.com)</small>
| {{yes}}
| {{yes}}
| {{no}}, errors
| {{okay|Almost}}
| {{no}}
| [[Windows-1252]]
| {{no}}
|-
! [http://upsidedown.info UpsideDown.info]
| {{yes}}
| {{okay|Incomplete}}
| {{yes}}
| {{no}}
| {{okay|X-axis, Incomplete}}
| All of [[Unicode]]
| {{yes}}
|-
! [http://www.upsidedowntext.com UpsideDownText.com]
| {{yes}}
| {{okay|Incomplete}}
| {{yes}}
| {{yes}}
| {{okay|Errors}}
| [[Latin characters in Unicode|Latin characters with Unicode]]
| {{yes}}
|-
! [http://www.flipallwords.com Flipallwords.com]
| {{yes}}
| {{no}}
| {{no}}
| {{yes}}
| {{no}}
| Latin for letters<br>all of Unicode for numbers
| {{no}}
|-
! [[Calculator spelling]]
| {{okay|Incomplete}}
| {{okay|Incomplete}}
| {{okay|Incomplete}}
| {{no}}
| {{no}}, but conceivable
| Numerals 0-9
| {{no}}
|-
! [http://www.web2generators.com/text/write_upside_down Write upside down]<br><small>(web2generators.com)</small>
| {{yes}}
| {{yes}}
| {{yes}}
| {{yes}}
| {{no}}
| All of [[Unicode]]
| {{no}}
|-
! [http://lunicode.com Lunicode]
| {{yes}}
| {{yes}}
| {{yes}}
| {{yes}}
| {{okay|Y-axis}}
| All of [[Unicode]]
| {{yes}}
|}


==See also==
* [[Ambigram]]s often play with perceptual shifts of inverted and rotated text.
==References==
==References==
{{reflist}}
{{reflist}}
Line 399: Line 265:
[[Category:Encodings]]
[[Category:Encodings]]
[[Category:Leet]]
[[Category:Leet]]
[[Category:Constrained writing]]

Latest revision as of 09:48, 9 July 2024

Transformations of text are strategies to perform geometric transformations on text (reversal, rotations, etc.), particularly in systems that do not natively support transformation, such as HTML, seven-segment displays and plain text.

Implementation

[edit]

Many systems, such as HTML, seven-segment displays and plain text, do not support transformation of text. In the case of HTML, this limitation in display may eventually be addressed through standard cascading style sheets (CSS), since proposed specifications for CSS3 include rotation for block elements.[1] In the meantime, several ways of producing the visual effects of text transformations have come into use.

Text rotated 90º using CSS
Rotated text
Horizontally mirrored text using CSS
Mirrored text
Vertically mirrored text using CSS
Mirrored text

The most common of these transformations are rotation and reflection.

Unicode supports a variety of characters that resemble transformed characters, primarily for various forms of phonetic transcription. Each of these character names indicates what kind of transformation the characters have undergone:

  • Reversed characters, those that have been reflected in a vertical line, or flipped horizontally, like certain Cyrillic script letters;
  • Inverted characters, those that have been reflected on a horizontal line (i.e., flipped vertically, only one letter has been done this way);
  • Turned characters, those that have been rotated 180 degrees and thus appear upside-down (this is the most common);
  • Sideways characters, those that have been rotated 90 degrees counterclockwise (generally the least supported, and used only for a handful of vowels in the Uralic Phonetic Alphabet system).

Upside-down text

[edit]

Strategies can be used to render words upside down in languages such as HTML that do not permit rotation of text; using Unicode characters (especially those in the IPA), a very close approximation of upside-down text (also called flip text) can be achieved. The letters s, x, z, and o are rotationally symmetrical, while pairs such as b/q, d/p, and n/u are rotations of each other. The rest of the letters have been encoded into the Unicode IPA section, generating a complete set of upside-down lowercase letters. With the addition of the Fraser alphabet to the Unicode standard in version 5.2, full (or at least near-full) support for upside-down capital letters is now available. Number support is incomplete; four numbers are universally strobogrammatic (0, 8, and 6/9), and the upside-down versions of numbers 2 and 3 have been provisionally assigned Unicode points for use in dozenal notation; however, other numbers still are not supported. Punctuation (by use of such characters as the interpunct and the inverted question mark and exclamation point) is mostly covered. Several Internet utilities exist for the transformation of regular text to (and sometimes from) upside-down text; each has its own slightly different algorithm for letters not precisely or well covered. A list of converters and algorithms can be found at the list below.

A similar process is USD encoding, which uses characters entirely within the ASCII character set. Because it is almost entirely alphanumeric, it is far more compatible with other programs that do not support Unicode, and more readily typed by hand. However, the text created by using USD encoding is far less legible, and in fact, more closely resembles Leet. Another problem is that because not all letters fit well, the USD algorithms cannot be a complete involution (i.e., completely convertible back and forth) and contain a complete set of letters at the same time. For instance, the Albartus USD algorithm example seen in the "Examples" section below has k, T, t, and R still in their upright positions. Another issue with USD encoding is the use of italic type. The letter "a" will, in most typefaces using italic fonts, render it as a "one-story" Latin alpha, thus causing problems with any word using that letter as a lowercase "e." Oblique type does not have this problem.

Below is a conversion table that can be used to transform lowercase, uppercase numeric and punctuation output. These characters require Unicode version 8.0 minimum (in particular the ᘔ and Ɛ from the duodecimal block).

Lowercase Letters z ʎ x ʍ ʌ n ʇ s ɹ b d o u ɯ ʞ ſ̣ ɥ ɟ ǝ p ɔ q ɐ
007A 028E 0078 028D 028C 006E 0287 0073 0279 0062 0064 006F 0075 026F A781 029E 017F+0323 1D09 0265 0253 025F 01DD 0070 0254 0071 0250
Capital Letters Z X 𐤵 Ʌ Ո S Ԁ O N I H Ǝ Ɔ
005A 2144 0058 10935 0245 0548 A7B1 0053 A4E4 A779 0500 004F 004E A7FD A780 A7B0 A4E9 0049 0048 2141 2132 018E A4F7 0186 A4ED 2C6F
Numbers 0 6 8 𝘓 9 ߈
0030 0036 0038 1D613 0039 100C 07C8 218B 218A 21C2
Punctuation ¿ ¡ , ˙ ' ؛
214B 203E 00BF 00A1 201E 002C 02D9 0027 061B

Sideways text

[edit]

Sideways text presents a unique problem. Unlike rotating text 180 degrees, the number of sideways characters falls far short of what would be needed for most purposes, and because text is rendered horizontally, it would be very difficult to render beyond one line of vertical text in a well-aligned manner without columns, especially in proportional fonts (furthermore, each character would require a line break after it). The process of using alternate characters for sideways text is further complicated by the fact that most fonts space letters further apart vertically (to accommodate underlining and overlining) than horizontally, and that most fonts are taller than they are wider, making simulated sideways text look significantly more awkward.

Until CSS3 introduced rotation for block elements,[2] there was no direct way to rotate text at any direction other than the manual 180-degree method described above. Internet Explorer offered a proprietary CSS property that rotated text 90 degrees clockwise, which has been revised and incorporated into CSS: <div style="writing-mode:vertical-rl;"> There remain some inconsistencies in how the writing-mode property is implemented; rotation can also cause some issues with a given element's width, height and word wrapping.

The most common way around these problems was to use images of text, which can then be rotated and transformed in an image editor at will, and to represent the text in those images with the alt attribute so that search engines and text-only browsers can read it properly. The use of ANSI art and box-drawing characters to manually draw sideways text has the advantage of being copiable and pastable (whereas images are not in most plain text situations), but generally creates large characters and is not generally readable by search engines. With the broader adoption of CSS3 by all of the major browsers, these methods are now mostly obsolete for Web media.

Reversed text

[edit]

Though less widespread, text can also be reversed to be a mirror image of itself. Letters A, H, I, M, O/o, T, U, V/v, W/w, X/x, Y, and in some fonts i and l are symmetrical in the y-axis; the pairs of b/d and p/q transform to each other. The letters И, Я, and г from Cyrillic, among other sources, are among the numerous characters that can be used to further generate this effect. Reversed text can use capital letters mixed with lowercase, as opposed to the strict lowercase used by upside-down transformation (upside-down lowercase and capital letters do not generally align as they would upright, though reversed letters do).

X-axis symmetry is visible in the letters B, C, D, E, H, I, K, O, X, and in some fonts a and l, as well as in the pairs of a/g, b/p, d/q, e/G, and f/t. Expanding to Cyrillic and Greek produces more symmetries, such as Λ/V and Γ/L.

The Fixedsys Excelsior typeface includes a complete set of reversed characters like this in its Private Use Area. However, online utilities to create mirrored text are not readily available, and most sites that claim to "mirror text" or "reverse text" in fact only change the order of the letters and do not actually flip the letters themselves.

Dilated text

[edit]

Through the use of Unicode's small capitals, small-form punctuation, and subscript and superscript phonetic modifiers, text can be created that is smaller than the inline text. This is generally only necessary for applications that only support one-size plain text since HTML and CSS support different text sizes.

Examples

[edit]
Name


Year

𝄩

𝄩







𝄩

ϖ
𝄩


2018
2019
2020
Example table with sideways
text using Unicode characters
  • Artistry, such as representing the two end zones or player designations on an American football gridiron; e.g. "sɹəꞁəəʇS ɥᵷɹnqsʇʇᴉԀ"from this example or "sʇuɐᴉᵷ ʞɹo⅄ ʍəN ƕ" (note the use of hwair as a dingbat of the team's logo).
  • Emoticons are traditionally drawn sideways in North America.
  • Better fit; for instance, rotating column headers on a table sideways would produce a more compact table, desirable particularly in tables that contain mostly abbreviations and numeric values.
  • Evoking Russian stereotypes, by flipping certain letters one at a time.
  • Evoking simplicity, such as childlike confusion over the direction of a letter (e.g., "Toys Я Us").
  • Symmetry, such as in the wordmarks for Nine Inch Nails (NIИ), ABBA (AꓭBA), or The Rush Limbaugh Show "EIB" slogan (εıз). The use of transformation in this fashion is known as an ambigram.
  • Calculator spelling on seven-segment displays, where numbers represent letters upside down (e.g. 07734, 07734, "hello").
  • Emulating the boustrophedon style of writing, where alternating lines are written in opposite directions.
  • Pentominoes and tetrominoes resemble (and are traditionally named after) Latin letters, and the rotation of these letterlike objects forms the basis of several games, including Tetris.
  • Though not strict transformation, the substitution of a plural "s" with its near-reflection "z" is a fairly common trope among some minor league sports teams in the United States, in order to make team names seem more modern.
  • Basic encryption, to "hide" the answer to a joke or puzzle, for instance:
Question: How can you tell an introvert from an extrovert?
Answer: ˙sǝoɥs s,ʎnᵷ ɹǝɥʇo ǝɥʇ ʇɐ sʞooꞁ ʇɹǝʌoɹʇxǝ ǝɥʇ 'sɹoʇɐʌǝlǝ ǝɥʇ uı (Using the Revfad algorithm)
Or: 'saoys s.hn6 R3HTO ayt te skool tJa^oJtxa ayt 'sJote^ala ayt uI (using the Albartus USD algorithm)
  • In baseball scorekeeping, a player who strikes out despite not swinging at the third strike is indicated in the official scorebook with a reversed or turned K. It has been added to Unicode in version 7.0 at U+A7B0 (Ʞ).
  • On the Soundgarden album Superunknown, all mention of the album or title track (except in the lyrics booklet) is shown as "Superиmoиʞи∩".
  • The beverage 7Up during the early 2000s had a spin-off counterpart, known as dnL, with a significantly different color and flavor as well as caffeine.
  • Facebook added "upside-down English" as a language choice in summer 2009.

Example of reversed text reflected along a y-axis:

Example:...иiɒəɒ иɘqo x иoiƨиɘмib oɟ lɒɟɿoq ɘнɟ ɟʇɘl γbodɘмoƧ (Somebody left the portal to Dimension X open again...)

Poet Darius Bacon has written two examples of palindromic poetry that reads the same upside-down as it does rightside up.[3]

Russian

[edit]
Question: How do flamingos get their color?
Answer: ¿ɯǝʚǹ и̯oʚɔ ɯoıɐhʎvou oɹниꟺɐvф 𝼐ɐ𝼐

See also

[edit]
  • Ambigrams often play with perceptual shifts of inverted and rotated text.

References

[edit]
  1. ^ Bert Bos, ed. (August 9, 2007). "CSS basic box model". W3C. Retrieved 2012-11-19.
  2. ^ Can I use... CSS3 transforms
  3. ^ Bacon, Darius. a poem and deus am. The Palindromist #4.