各文字のテキスト領域（入力）のランダムなカーニング

Question

私はこれに新しいですが、答えを探して1週間過ごした後、私は直接尋ねてみると思っていました。 私はjavascriptとjqueryを使ってテキストエディタを構築しています。私はtextarea（contenteditable付き）、スタイルシート、およびjsスクリプトを持っています。私が欲しいのは、押された文字ごとに、カーニングはランダムになるということです。私は単純な関数でそれを実現しましたが、すべてのテキストエリアのテキストにこのカーニング、最後に押された文字だけを押すなどしてはいけないので、このタイプのものが結果になります。

simulation

は私のjsファイルで、これまで持っているものがあります：

$(document).ready(

function() { 
$('#textarea').keypress(function(){  
var KerningRandom = Math.floor((Math.random()*90)-20); 
$(this).css('letter-spacing',KerningRandom); 

}）;

ここに私のjsfiddleがあります。実際にはjsfiddleでは動作しません。なぜローカルで正常に動作するのですか？

ありがとうございます！

Answer 1

CSSで個々の文字（とグリフ）を扱うことはできません。のみ::first-letter。あなたが持っている

オプション：

1. 個々のスパンにすべての文字を変換します。あまりにも私は思う。
2. <canvas>を使用するとテキストがレンダリングされ、テキストフローレイアウトがゼロから実装されます。

Answer 2

あなたはそこで達成したいと思っているものを見つけることができます（私はあなたのものをフォークしました）。

https://jsfiddle.net/1gesLgsa/2/

フルコード：ポイント説明によって

//Code from https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity 


    //Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/ 
    (function(cursorManager) { 

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements 
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX']; 

    //From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript 
    Array.prototype.contains = function(obj) { 
     var i = this.length; 
     while (i--) { 
      if (this[i] === obj) { 
       return true; 
      } 
     } 
     return false; 
    } 

    //Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text 
    function canContainText(node) { 
     if(node.nodeType == 1) { //is an element node 
      return !voidNodeTags.contains(node.nodeName); 
     } else { //is not an element node 
      return false; 
     } 
    }; 

    function getLastChildElement(el){ 
     var lc = el.lastChild; 
     while(lc && lc.nodeType != 1) { 
      if(lc.previousSibling) 
       lc = lc.previousSibling; 
      else 
       break; 
     } 
     return lc; 
    } 

    //Based on Nico Burns's answer 
    cursorManager.setEndOfContenteditable = function(contentEditableElement) 
    { 

     while(getLastChildElement(contentEditableElement) && 
       canContainText(getLastChildElement(contentEditableElement))) { 
      contentEditableElement = getLastChildElement(contentEditableElement); 
     } 

     var range,selection; 
     if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ 
     {  
      range = document.createRange();//Create a range (a range is a like the selection but invisible) 
      range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range 
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
      selection = window.getSelection();//get the selection object (allows you to change selection) 
      selection.removeAllRanges();//remove any selections already made 
      selection.addRange(range);//make the range you have just created the visible selection 
     } 
     else if(document.selection)//IE 8 and lower 
     { 
      range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) 
      range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range 
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
      range.select();//Select the range (make it the visible selection 
     } 
    } 

}(window.cursorManager = window.cursorManager || {}));  



// ACTUAL CODE MADE FOR THIS ANSWER 

    $('#textarea').keypress(function(event) { 
    event.preventDefault(); 
     var KerningRandom = Math.floor((Math.random() * 90)); 
     if ($("#last").length > 0) 
     { 
     var previousLast = $("#textarea #last").html(); 
     $("#textarea #last").remove(); 
     } 
     else 
     var previousLast = ""; 
     $("#textarea").html($("#textarea").html().slice() + previousLast + "<span id='last'>" + String.fromCharCode(event.which) + "</span>") 
     $("#last").css('margin-left', KerningRandom + "px"); 

var editableDiv = document.getElementById("textarea"); 
cursorManager.setEndOfContenteditable(editableDiv) 
    }); 

var editableDiv = document.getElementById("textarea"); 
cursorManager.setEndOfContenteditable(editableDiv) 

ポイント：

 $('#textarea').keypress(function(event) { 
    event.preventDefault(); 
     var KerningRandom = Math.floor((Math.random() * 90)); 
     if ($("#last").length > 0) 
     { 
     var previousLast = $("#textarea #last").html(); 
     $("#textarea #last").remove(); 
     } 
     else 
     var previousLast = ""; 
     $("#textarea").html($("#textarea").html() + previousLast + "<span id='last'>" + String.fromCharCode(event.which) + "</span>") 
     $("#last").css('margin-left', KerningRandom + "px"); 

     var editableDiv = document.getElementById("textarea"); 
     cursorManager.setEndOfContenteditable(editableDiv) 
    }); 

event.preventDefault()キーを押したときに追加される文字を防ぎます。 次に、左余白の値を計算し、前の最後の文字を保存し、最後の文字が含まれていないスパンを削除します。 前の最後の文字と実際の内容にランダムな左余白（カーニングをシミュレートする）と押されたキーの値（ How to find out what character key is pressed?のおかげで）を追加します。

その後、私たちは手動でテキストエリアの最後に移動しなければなりませんでした。

そのため、私は How to move cursor to end of contenteditable entityのコードを使用して説明を行っています。