How to convert Java source string to HEX for Unicode to embed in HTML?

Asked

Viewed 44 times

0

How to convert using Javascript:

The guy Java source string: \u900 for Unicode: ऀ

Today I have the following HTML element:

<i class="icon-zoom-out"></i>

And the CSS class:

@font-face {
        font-family: 'iconcombo';
        src:
          url("#{$PATH_FONTS}iconcombo.ttf?g5kz9z") format("truetype");
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }
      
      [class^='icon-'],
      [class*=' icon-'] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'iconcombo' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
      
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

.icon-zoom-out:before {
    content: '\e900';
}

The idea is that I don’t need to pass the class on the pseudo-element before, but incorporate directly:

<i>&#x900;</i>

Suggestion:

function convertHexToUnicode(param) {
  //aqui viria o método que faz a conversão
  return resultConvertUnicode;
}    

var icon = {
'zoom-out': '\ue900',
'zoom-in': '\ue901',
'zip-archive': '\ue902',
 zip: '\ue903',
 yen: '\ue904',
 ...
}

function getIcon(className, element) {
    var resultUnicode = convertHexToUnicode(icon[className]);
    element.innerHTML = '<i>'+resultUnicode+'</i>';
}
javascript css
  • 1

    And how do you suggest this is done? You have an object that maps an icon name to your respective Unicode code point? I think it is worth [Edit] the question to add more details.

  • I can’t imagine how, if I had any idea, it wouldn’t be like a question. Mapping does not matter at this time, because a generic method could solve all the structures that will come, since it is the same type.

  • See that it’s not a unusual doubt

  • P.S. I edited, and added more details of the suggestion, as you suggested.

1 answer

2


You already have a map that creates a relationship between an icon name and its respective code escape for Unicode in Javascript, which will create an icon name map for a given character based on your code point.

Thus, simply create a method that captures the code point of a certain character and inserts it into a HTML entity.

const icons = {
  'zoom-out': '\ue900',
  'zoom-in': '\ue901',
  'zip-archive': '\ue902',
  'zip': '\ue903',
  'yen': '\ue904',
  
  // Exemplo para demonstrar:
  'happy': '\ud83d\ude03'
};

function charToHTMLEntity(char) {
  const codePoint = char.codePointAt(0);
  return `&#${codePoint};`;
}

console.log(charToHTMLEntity(icons.happy)); // &#128515;
document.body.innerHTML = charToHTMLEntity(icons.happy);

The method codePointAt returns a natural number representing a unicode code point at a certain position. From it, an HTML entity is created in its decimal format.

It is worth mentioning that the example happy has "two escape sequences", that is, a sequence with two code Units. This is actually called surrogate pair and is used to escape, in Javascript, characters above Unicode code point U+FFFF.

Note, however, that:

The Java source string type: \u900 for Unicode: &#x900;.

It’s wrong. First, "Java" is one thing and "Javascript" is another. And, in fact, the first (\u900) is a sequence that escapes, in Javascript, a Unicode code-point for its respective character. The second (&#x900) is not "Unicode", but an HTML entity in hexadecimal format. This entity can be defined decimally or hexadecimally, see:

<!-- Forma decimal -->
&#128515;

<!-- Forma hexadecimal equivalente. 
     Note o `x`, que a denota. -->
&#x1f603;

To learn more about this character-related terminology and Unicode, read this excellent response.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.