Tui.editor: Editor capitalizing some code blocks

[vsoch]

hey @nhn another quick question! I can't reproduce this on my computer (I have Ubuntu 16.04 and Firefox) but some of my testers are reporting that the markdown renderer mysteriously capitalizes some code block letters. For example, take a look at the -l rendered below:

It of course doesn't come through in the raw text submit via the interface, but the rendering. Any ideas for what we can look for / test?

[seonim-ryu]

@vsoch Hmm... it doesn't reproduce when I check.

The first thing to check is that all characters are converted to uppercase?
Just looking at the screenshots, does the lowercase i look like an uppercase L because of the _font style_?

[vsoch]

I can't produce it either, and just checked the editor for some font setting (I don't see one!) I'm going to ping @katgit to get her feedback on the font her browser is using. @katgit and what browser / OS produces the error (and did another browser not?) Can you check what browser extensions are on?

[katgit]

Hi, I tried to use Chrome and Firefox and in both editors I get the same behavior: all lowercase "-l" symbols are turned into uppercase"-L"

[katgit]

I used the same browsers to view if the same behavior happens if I use the same bash script code within README.md file in github and it does not. Everything works perfectly fine in that environment. And my the way, I am using Windows 10.

[seonim-ryu]

@katgit Thank you for your detailed description.

Can you confirm two more things?

First of all, the Markdown Preview in the editor(right screen of markdown mode) uses the renderer of markdown-it. Can you check the same issue in the demo page below?

• https://markdown-it.github.io/

Secondly, when you view an element in Chrome Developer Tools, can you check the text value of that element?

[katgit]

Here is a screenshot output from markdown-it.github.io:

[katgit]

To answer the second question: The HTML source code for the element it is correct:
#!/bin/bash -l

[katgit]

I also just copied the output from the window on the right and pasted it into a text editor and I got lowercase l. From all these experiments I conclude that the issue is related to the font that is being used to display the output. In this particular font the lowercase l looks like L.

I looked at the element font family and it is coded as:

font-family: Consolas, Courier, "Apple SD 산돌고딕 Neo", -apple-system, "Lucida Grande", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "Segoe UI", "돋움", dotum, sans-serif;
border: 0;

If I paste the content of the "right window" text to the Word it says that "Consolas" font is used, but if I select consolas myself and write a text in the word it looks like this:

[katgit]

But if I make it Italic then I get the same weird looking l that looks like L:

[katgit]

In my word document it is not very bad, but I guess in the browser and when the font size is small, then the letter looks like L

[seonim-ryu]

@katgit Oh, very detailed! Thanks. And I found the environment you talked about, tested it, and confirmed the issue.

But the font family that is the cause of the current issue is the default style, so it's hard to change right now. The major version may have to change.

If this is the case, you can override the default font family in your product. 🤔

https://github.com/nhn/tui.editor/blob/53ab4e10f93271741ebe4149bf1a380bc7d8aab5/src/css/tui-editor.css#L1158-L1159

[vsoch]

@katgit I just reduced the set of default fonts for the editor on askci, see here https://github.com/vsoch/askci/blob/master/askci/apps/main/templates/articles/article_details.html#L11 It's live if you want to test it out! Let is know if the issue is resolved. If not, @seonim-ryu you might take a look and let me know if I removed the wrong ones.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!