Ändern des Zeichenabstands

Ich habe versucht herauszufinden, wie normale Zeichen (ABC) in Zeichen voller Breite (ABC) konvertiert werden. Ich kann nicht finden, wie ich zu euch komme. Ich habe noch keinen Javascript-Code. Hier ist mein HTML:Ändern des Zeichenabstands

<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>

und CSS (auch wenn es vielleicht nicht sinnvoll sein):

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%; 
    } 
}

Danke.

Quelle

2016-12-20 Anonymous

einfach eingestellt die letter-spacing CSS property des Ausgangs textarea auf einen relativen Wert (wie em) und kopieren den Wert aus dem Eingang textarea zum outupt textarea auf dem input event:

// 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>

Quelle

2016-12-20 18:34:18

Danke für die Antwort, aber es ist nicht wirklich, was ich meinte, ich meinte Umwandlung zu dieser Art von voller Breite: Hey, wie geht es dir –

Welchen Algorithmus verwenden Sie, um zu dieser Breite zu kommen? Welcher "Typ" der vollen Breite ist das? Siehe meine aktualisierte Antwort. –

Ich versuche tatsächlich, einen Konverter zu erstellen, den ich bereits kenne, so dass ich überhaupt nicht weiß, wie es funktioniert. Es reicht von U + FF0x bis U + FF9x im Unicode-Konsortium Code-Diagramm. Hier ist der Konverter: https://lingojam.com/VaporwaveTextGenerator –

Ändern des Zeichenabstands

Antwort

Verwandte Themen