steal icon indicating copy to clipboard operation
steal copied to clipboard

Add unicode bolding function, takes a string and returns bolded variant

Open JaneOri opened this issue 6 years ago • 4 comments

probably will land here: https://github.com/stealjs/steal/blob/master/src/extension-stack-trace.js loader._boldText(str) possibly

Useful for highlighting things in console logs

Target compatibility for the conversion: IE11+

JaneOri avatar Mar 15 '18 20:03 JaneOri

If you can think of a better name that would be good too 😂

matthewp avatar Mar 15 '18 20:03 matthewp

Here's a lame version of a working function:

var unibold = function (str) {
  var bold = "𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭";
  var normal = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  return str.replace(/[a-z0-9]/gi, function (x) {
    return bold.substr(normal.indexOf(x) * 2, 2);
  });
};

We'll see if anyone thinks the bold characters are too small in the console: image

TextEncoder and TextDecoder aren't in node as far as I could find, which would make a faster math-based version of this easier.

JaneOri avatar Mar 15 '18 23:03 JaneOri

And here's another lame (but much faster) version:

var unibold = (function () {
  var map = {
    "0": "𝟬", "1": "𝟭", "2": "𝟮", "3": "𝟯", "4": "𝟰", "5": "𝟱", "6": "𝟲", "7": "𝟳",
    "8": "𝟴", "9": "𝟵", "a": "𝗮", "b": "𝗯", "c": "𝗰", "d": "𝗱", "e": "𝗲", "f": "𝗳",
    "g": "𝗴", "h": "𝗵", "i": "𝗶", "j": "𝗷", "k": "𝗸", "l": "𝗹", "m": "𝗺", "n": "𝗻",
    "o": "𝗼", "p": "𝗽", "q": "𝗾", "r": "𝗿", "s": "𝘀", "t": "𝘁", "u": "𝘂", "v": "𝘃",
    "w": "𝘄", "x": "𝘅", "y": "𝘆", "z": "𝘇", "A": "𝗔", "B": "𝗕", "C": "𝗖", "D": "𝗗",
    "E": "𝗘", "F": "𝗙", "G": "𝗚", "H": "𝗛", "I": "𝗜", "J": "𝗝", "K": "𝗞", "L": "𝗟",
    "M": "𝗠", "N": "𝗡", "O": "𝗢", "P": "𝗣", "Q": "𝗤", "R": "𝗥", "S": "𝗦", "T": "𝗧",
    "U": "𝗨", "V": "𝗩", "W": "𝗪", "X": "𝗫", "Y": "𝗬", "Z": "𝗭"
  };
  return function (str) {
    return str.replace(/[a-z0-9]/gi, function (x) {
      return map[x];
    });
  };
})();

Not sure what opinions are on the size of the text yet.

JaneOri avatar Mar 16 '18 13:03 JaneOri

I intend to try it out myself (maybe early next week) and post a few screenshots.

As far as which method, this will only be used for error messaging so I don't think perf is a big issue here, I care more about how many bytes it adds to steal.js.

matthewp avatar Mar 16 '18 13:03 matthewp