How can I ask a key of the keyboard show another character in HTML?

Question

First let me say what is half-space for those who don't know. For example compare the two following notes.

می‌آیم - می آیم

You can compare the distance between می and آیم when normal space and half-space are used.

As Mihan Nijat mentioned in his answer, there is an HTML code for it ​. Usually when you use some keyboards such as standard Iranian keyboard there are some combined keys for it such as Shift+B.

Now my question is this, is it possible to define a half-space by ourselves in HTML document not using these mentioned above. So defining a specific half-space with length that we want such as 1 pixel for example. And is it possible to ask HTML to compile a character with our self-defined half-space automatically?

Answer 1

On getting an input from the keyboard, replace it with something else. Refer to this : filddle

In the fiddle just replace \x20 with which ever UTF spacing option you want.

function transformTypedChar(charStr) {
  return charStr == "a" ? "\x20" : charStr;
}

Code:

function transformTypedChar(charStr) {
  return charStr == "a" ? "\x20" : charStr;
}

function getInputSelection(el) {
  var start = 0,
    end = 0,
    normalizedValue, range,
    textInputRange, len, endRange;

  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    start = el.selectionStart;
    end = el.selectionEnd;
  } else {
    range = document.selection.createRange();

    if (range && range.parentElement() == el) {
      len = el.value.length;
      normalizedValue = el.value.replace(/\r\n/g, "\n");

      // Create a working TextRange that lives only in the input
      textInputRange = el.createTextRange();
      textInputRange.moveToBookmark(range.getBookmark());

      // Check if the start and end of the selection are at the very end
      // of the input, since moveStart/moveEnd doesn't return what we want
      // in those cases
      endRange = el.createTextRange();
      endRange.collapse(false);

      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
        start = end = len;
      } else {
        start = -textInputRange.moveStart("character", -len);
        start += normalizedValue.slice(0, start).split("\n").length - 1;

        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
          end = len;
        } else {
          end = -textInputRange.moveEnd("character", -len);
          end += normalizedValue.slice(0, end).split("\n").length - 1;
        }
      }
    }
  }

  return {
    start: start,
    end: end
  };
}

function offsetToRangeCharacterMove(el, offset) {
  return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}

function setInputSelection(el, startOffset, endOffset) {
  el.focus();
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    el.selectionStart = startOffset;
    el.selectionEnd = endOffset;
  } else {
    var range = el.createTextRange();
    var startCharMove = offsetToRangeCharacterMove(el, startOffset);
    range.collapse(true);
    if (startOffset == endOffset) {
      range.move("character", startCharMove);
    } else {
      range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
      range.moveStart("character", startCharMove);
    }
    range.select();
  }
}

$("#foo").keypress(function(evt) {
  if (evt.which) {
    var charStr = String.fromCharCode(evt.which);
    var transformedChar = transformTypedChar(charStr);
    if (transformedChar != charStr) {
      var sel = getInputSelection(this),
        val = this.value;
      this.value = val.slice(0, sel.start) + transformedChar + val.slice(sel.end);

      // Move the caret
      setInputSelection(this, sel.start + 1, sel.start + 1);
      return false;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="foo" cols="80" rows="8">Type in here and any 'a' will be you type will show up as a ' '</textarea>

Spacing codes in UTF:

\x20 – The standard space or \s

\u00A0 – The non-breaking space[\xC2\xA0] or  

\x0D – Carriage Return or \r

\x0A – New Line or \n

\x09 – The tab or \t

Spacing options in html for your reference:

 - non breaking space :  
 - en space :   or  
 - em space :   or  
 - 3-per-em space :  
 - 4-per-em space :   
 - 6-per-em space :  
 - figure space :  
 - punctuation space :  
 - thin space :   or  
 - hair space :  

Answer 2

ZERO WIDTH SPACE

The ZERO WIDTH SPACE creates space between two characters but is not actually space in same width with default space. This is very handy for Arabic and Persian scripts.

commonly abbreviated ZWSP this character is intended for invisible word separation and for line break control; it has no width, but its presence between two characters does not prevent increased letter spacing in justification.

HTML Entity (decimal): ​

The complete detail is available here.

If you want to press a key and create ZERO WIDTH SPACE for you, then use JavaScript for it with logic. Example: IF A is pressed then DO [this]. Use the keycode in the logic.

You need something like following with event add listener.

function(e) {
    if (e.keyCode == 13) {
      .... code here
    }
}

In the above example the 13 whole number is for enter key.

If you don't have rights to change the website, and you just want to type in textarea or input and allowed to use HTML. Then use ​ code and it will work for you.

Update: I just checked the website and adding zero-width space with ctrl+b doesn't add any bold heart for me. I copied your posted text and pasted in word program. And replaced All the ♥ with space, and then copied the text and pasted on the forum using past from word - icon.

See this test picture: