Как перевернуть введённую строку "вверх ногами"

...интересуются наши любознательные юные друзья. Легче всего - стилем:

Вот исходник этого фрагмента:

<style>
 #flippedText {
  transform: rotateX(180deg);
 }
</style>
<form style="font-family: monospace;">
 Текст: <input type="text" size="60" maxlength="1024" id="originalText" value=""
  onkeyup="document.getElementById('flippedText').value = document.getElementById(this.id).value;">
 <br>
 Ответ: <input type="text" size="60" maxlength="1024" id="flippedText" readonly>
</form>

Подход всем хорош, но вставив "перевёрнутую строку обратно в первое текстовое поле, мы снова увидим оригинал, ведь переворачивание не "настоящее", а чисто стилевой эффект.

Можно придумать и javascript-альтернативу на основе таблицы символов Юникода, и хотя взаимно однозначное соответствие символов подобрать будет трудновато, написав ниже, например, "Привет, волк!" и вставив текст из второго поля обратно в первое, мы увидим в результате повторного переворачивания нечто, похожее на оригинал (но не более, чем похожее).

Исходник этого фрагмента:

<script>
 function flip(id,res) {
  let result = flipString(document.getElementById(id).value);
  document.getElementById(res).value = result;
 }
 function flipString(str) {
  let len = str.length;
  let result = new Array(str.length);
  for (let i = 0; i < len; i++) {
  let c = str.charAt(i);
  let r = flipTable[c];
  result[i] = r ? r : c;
 }
 return result.join('');
 }
 let flipTable = {
  a : '\u0250', b : 'q', c : '\u0254', d : 'p', e : '\u01DD',
  f : '\u025F', g : '\u0183', h : '\u0265', i : '\u0131', j : '\u027E',
  k : '\u029E', l : 'l', m : '\u026F', n : 'u', r : '\u0279',
  t : '\u0287', v : '\u028C', w : '\u028D', y : '\u028E', '.' : '\u02D9',
  '[' : ']', '(' : ')', '{' : '}', '?' : '\u00BF', '!' : '\u00A1',    
  "\'" : ',', '<' : '>', '_' : '\u203E', '\u203F' : '\u2040', '\u2045' : '\u2046',
  '\u2234' : '\u2235', '\r' : '\n',
  а : '\u0250', б : '\u018D', в : '\u029A', г : '\u0279', д : '\u0253',
  е : '\u0259', ё : '\u01DD', ж : 'ж', з : '\u03B5', и : 'и',
  й : '\u0146', к : '\u029E', л : 'v', м : 'w', н : 'н',
  о : 'о', п : 'u', р : 'd', с : '\u0254', т : '\u026F', 
  у : '\u028E', ф : 'ф', х : 'х', ц : '\u01F9', ч : '\u04BA',
  ш : 'm', щ : 'm', ъ : 'q', ы : '\u0131q', ь : 'q',
  э : '\u0454', ю : 'о\u0131', я : '\u0281',
  А : '\u2200', Б : '\u0261', В : '\u029A', Г : '\u02E9', Д : '\u2207',
  Е : '\u018E', Ё : '\u018E', Ж : 'Ж', З : '\u2107', И : 'И', 
  Й : '\u1E47', К : '\u0A2E', Л : 'V', М : 'W', Н : 'H',
  О : 'O', П : '\u2210', Р : '\u217E', С : '\u0186', Т : '\u22A5', 
  У : '\u028E', Ф : 'Ф', Х : 'X', Ц : 'n', Ч : '\u0570',
  Ш : '\u0BF1', Щ : 'm', Ъ : 'q', Ы : '\u09F7q', Ь : 'q',
  Э : '\u0404', Ю : 'O\u09F7', Я : '\u04C3'
 }
 for (let i in flipTable) { flipTable[flipTable[i]] = i; }
</script>
<form style="font-family: monospace;">
 Текст: <input type="text" size="60" maxlength="1024" id="originalText2"
  onkeyup="flip(this.id,'flippedText2')" value="">
 <br>
 Ответ: <input type="text" size="60" maxlength="1024" id="flippedText2" readonly>
</form>

Что касается "графических" строк на canvas, их можно отражать при отрисовке методом setTransform.

28.09.2023, 13:24 [259 просмотров]