Изменение разметки символов

Я пытался выяснить, как преобразовать обычные символы (ABC) в символы полной ширины (ABC). Я не могу найти, как я добираюсь до вас, ребята. У меня пока нет кода Javascript. Вот мой HTML:Изменение разметки символов

<html> 

<head> 

</head> 

<body> 

<link rel="stylesheet" type="text/css" href="main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet"> 

<h1>Text convertor 2000</h1> 

<textarea placeholder="Text Input" id="textarea_left" spellcheck="false"></textarea> 
    <textarea placeholder="Text Output" id="textarea_right" spellcheck="false"></textarea> 


</body> 



</html>

и CSS (даже если это может быть не полезно):

body { 
background: linear-gradient(270deg, #ffa6ff, #6bffff); 
    background-size: 200% 200%; 
    -webkit-animation: backgroundGradient 15s linear infinite; 
    -moz-animation: backgroundGradient 15s linear infinite; 
    animation: backgroundGradient 15s linear infinite; 
} 

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 

h1 { 
    font-family: 'Space Mono', monospace; 
    font-size: 50px; 
    margin-left: 640px; 
    color: #631b87; 
    -webkit-animation: simpleColorChange 5s ease infinite; 
    -moz-animation: simpleColorChange 5s ease infinite; 
    -o-animation: simpleColorChange 5s ease infinite; 
    animation: simpleColorChange 5s ease infinite; 
} 

@-webkit-keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

@-moz-keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

@-o-keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

@keyframes simpleColorChange { 
    0% { 
    color: #6c4df0 
    } 
    50% { 
    color: #b146d4 
    } 
    100% { 
    color: #6c4df0 
    } 
} 

#textarea_left { 
    margin-left: 280px; 
    margin-top: 80px; 
    width: 650px; 
    height: 550px; 
    resize: none; 
    border: none; 
    overflow: auto; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 25px; 
} 

#textarea_right { 
    margin-left: 10px; 
    margin-top: 80px; 
    width: 650px; 
    height: 550px; 
    resize: none; 
    border: none; 
    overflow: auto; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 25px; 
} 

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: #585652; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: #585652; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    color: #585652; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: #585652; 
} 

@-webkit-keyframes backgroundGradient { 
    0% { 
    background-position: 0% 50%; 
    } 

    50% { 
    background-position: 100% 50%; 
    } 

    100% { 
    background-position: 0% 50%; 
    } 
} 

@-moz-keyframes backgroundGradient { 
    0% { 
    background-position: 0% 50%; 
    } 

    50% { 
    background-position: 100% 50%; 
    } 

    100% { 
    background-position: 0% 50%; 
    } 
} 

@keyframes backgroundGradient { 
    0% { 
    background-position: 0% 50%; 
    } 

    50% { 
    background-position: 100% 50%; 
    } 

    100% { 
    background-position: 0% 50%; 
    } 
}

Спасибо.

источник

2016-12-20 Anonymous

Просто установите letter-spacing CSS property выхода textarea к относительному значению (например, em) и скопировать значение из входного textarea в outupt textarea на input события:

// Get DOM references: 
 
var input = document.getElementById("textarea_left"); 
 
var output = document.getElementById("textarea_right"); 
 

 
// Set up an event listener on the input textarea for when it receives input 
 
input.addEventListener("input", function(){ 
 
    // Set the text of the output textarea to the input textarea's text 
 
    output.value = input.value; 
 
});

textarea { width:200px; height:200px; } 
 
.input { font-family:Arial, Helvetica, sans-serif; } 
 
/* Setting the letter-spacing to 1em creates a space of the height of 
 
    one letter "M" for each character. Change it in decimals to go bigger 
 
    or smaller as needed  */ 
 
.output { font-family:serif; letter-spacing:1em; }

<h1>Text convertor 2000</h1> 
 

 
<textarea placeholder="Text Input" id="textarea_left" spellcheck="false" class="input"></textarea> 
 
<textarea placeholder="Text Output" id="textarea_right" spellcheck="false" class="output"></textarea>

источник

2016-12-20 18:34:18

Спасибо, что ответили, но это не значит, что я имел в виду, я имел в виду преобразование в этот тип полной ширины: Эй, как вы –

Какой алгоритм вы используете для достижения этой ширины? Что такое «тип» полной ширины? См. Мой обновленный ответ. –

Я на самом деле пытаюсь воссоздать конвертер, который я уже знаю, поэтому на самом деле я вообще не знаю, как это работает. Он варьируется от U + FF0x до U + FF9x в кодовой диаграмме консорциума юникода. Вот конвертер: https://lingojam.com/VaporwaveTextGenerator –

ответ

Смежные вопросы