code block with unicode characters doesn't render correct width

[mandolin]

[leodevbro]

Did not you see the font recommendations in Blockman page? I think you are using non-monospace font. Software development is almost always better with monospace font. Please use monospace font, or mix of monospace fonts which have at least almost same character-space-width.

[mandolin]

I saw it.
sorry,maybe I didn't make it clear. Now let me explain:
I`m using a font https://github.com/be5invis/Sarasa-Gothic for chinese words, this font is designed for CJK characters , the concept is : One CJK character width is equal to the width of Two English letters.

[leodevbro]

Unfortunately I think I cannot do much about it. I posted exactly this issue to vscode repo, maybe some day vscode API will give us access to the pixel location of characters. Currently it's the VSCode API limitation.
microsoft/vscode#118994
So, I guess, just single monospace font can be used ideally. or also we can use mix of more than one monospace fonts which have at least almost same character-space-width.

[mandolin]

Thank you for your kind reply.

[leodevbro]

Isn't there any monospace font which has both Chinese and English characters?

[mandolin]

Including Sarasa-Gothic , All Chinese monospaced fonts(each of them has both Chinese and English characters implemented) are implemented by taking one Chinese character as the width of two English letters. because if a Chinese character is implemented as the width of one English letter, it will be very ugly, so no font will do so.

[leodevbro]

Are you using only "Sarasa-Gothic" font or mix with another font? Please give me information, exactly what is your font settings? maybe like this: "Consolas, 'Sarasa-Gothic', 'Oxygen Mono'"

and please give me the code of the first image, so I can test it myself, I think there is some chance that I may find a solution to your specific case.

[mandolin]

I tried to solve it,

in utils.js, I added a regex, and used it for 'currInLineIndexZero' calculating in getMacroInfoOfFile.
now the mutilplelinebox rendered correctly,

but the inlinebox still has problems,

so could you tell me where to fix it?

In addition, I think the better way is to make the 'doubleWidthCharsReg' be a configuration item for this extension.

[mandolin]

"editor.fontFamily": "'等距更纱黑体 T SC'",
this is my font setting, I only use this font.

for english font name when you test it, you can use
"editor.fontFamily": "'Sarasa Mono T SC'",

the test code is

if(搜索串==''||Site.Func.StrULength(搜索串)>this.搜索选项.搜索字符串最大长度){
    $('.j_txt-search').tooltip({ 
        customClass:'n_tooltip',
        boundary: 'window' ,
        title:'搜索词不能为空，并且总共不能超过50个汉字或100个英文字符',
        trigger:'manual'
    });
    var d速度={
        star撒大苏打:123
    }
    测试='和和和和和和和和和121212和和和和和和和和和和和23232323和和和和和和' ;//////sdsd
    $('.j_txt-search').tooltip('show');
    setTimeout((测试)=>{$('.j_txt-search').tooltip('hide')},2500);
    return;
}

[mandolin]

"editor.fontSize": 16,
One more important thing: "editor.fontSize" should be an even number.

[mandolin]

the code which I added in utils.js:

const doubleWidthCharsReg=/[\u2010\u2012-\u2016\u2020-\u2022\u2025-\u2027\u2030\u2035\u203B\u203C\u2042\u2047-\u2049\u2051\u20DD\u20DE\u2100\u210A\u210F\u2121\u2135\u213B\u2160-\u216B\u2170-\u217B\u2215\u221F\u22DA\u22DB\u22EF\u2305-\u2307\u2312\u2318\u23B0\u23B1\u23BF-\u23CC\u23CE\u23DA\u23DB\u2423\u2460-\u24FF\u2600-\u2603\u2609\u260E\u260F\u2616\u2617\u261C-\u261F\u262F\u2668\u2672-\u267D\u26A0\u26BD\u26BE\u2702\u273D\u273F\u2740\u2756\u2776-\u277F\u2934\u2935\u29BF\u29FA\u29FB\u2B1A\u2E3A\u2E3B\u2E80-\u9FFF\uF900-\uFAFF\uFB00-\uFB04\uFE10-\uFE19\uFE30-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6\u{1F100}-\u{1F10A}\u{1F110}-\u{1F12E}\u{1F130}-\u{1F16B}\u{1F170}-\u{1F19A}\u{1F200}-\u{1F251}\u{2000B}-\u{2F9F4}]/u;
doubleWidthCharsReg.compile(doubleWidthCharsReg);

        currInLineIndexZero += doubleWidthCharsReg.test(workString[i])?2:1;

[leodevbro]

I think I fixed it, your regex helped me a lot. check it out. the new version is 1.1.5 (2021-06-12). I added an experimental command to try support double width chars.

I updated README.md with this text:

If you use double width characters like these Chinese characters: 字符串最大字符串最, then you may want to run the experimental command to support such characters. Type F1 and type the command name: Blockman Toggle Try Support Double Width Chars.

[mandolin]

That's great! It`s all accurate now.

And I still think it's better to put this doubleWidthCharsReg in a configuration item of settings.json, because there are other CJK mono fonts similar to this 'sarasa mono t sc', and their definitions of which characters should implement double width, are different.

[leodevbro]

Interesting idea, I'll think about that.

[mandolin]

OK, I think this issue could be closed now. Thank you again.