Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arrow (➜) character in prompt is rendered small #6864

Closed
arish opened this issue Jul 10, 2020 · 15 comments · Fixed by #14959
Closed

Arrow (➜) character in prompt is rendered small #6864

arish opened this issue Jul 10, 2020 · 15 comments · Fixed by #14959
Assignees
Labels
Area-Fonts Related to the font Area-Rendering Text rendering, emoji, complex glyph & font-fallback issues In-PR This issue has a related PR Issue-Bug It either shouldn't be doing this or needs an investigation. Priority-3 A description (P3) Product-Terminal The new Windows Terminal.
Milestone

Comments

@arish
Copy link

arish commented Jul 10, 2020

Environment

Windows build number: [Version 10.0.19041.329]
Windows Terminal 1.0.1811.0
Microsoft Visual Studio Code 1.47.0

Steps to reproduce

  • Open Windows Terminal
  • Open oh-my-zsh with robbyrussell theme (or any theme that has an arrow character)
  • Open Visual Studio Code
  • Open its integrated terminal

Expected behavior

  • They should look identical

Actual behavior

  • The size of the arrow (➜) character in prompt is rendered smaller in Windows Terminal than Visual Studio Code's integrated terminal

Arrow character is smaller in Windows Terminal:

image

However, it looks accurate on Visual Studio Code:

image

@ghost ghost added Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Jul 10, 2020
@devcrev
Copy link

devcrev commented Jul 12, 2020

Also look at the checkmark size and colors. I am using the Cascadia Mono font in the screenshots below. In both examples, on the last line, the checkmark should be dark. It is not the right color in the Windows Terminal program but it is the right color in the VS Code Terminal.

Windows Terminal Excerpt...
image

VS Code Terminal Excerpt...
image

@zadjii-msft
Copy link
Member

zadjii-msft commented Jul 16, 2020

@miniksa do we have an active megathread for ongoing character sizing issues? See also #6738

@zadjii-msft zadjii-msft added Area-Fonts Related to the font Area-Rendering Text rendering, emoji, complex glyph & font-fallback issues Issue-Bug It either shouldn't be doing this or needs an investigation. Priority-3 A description (P3) Product-Terminal The new Windows Terminal. labels Jul 16, 2020
@ghost ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Jul 16, 2020
@zadjii-msft zadjii-msft added this to the Terminal v2.0 milestone Jul 16, 2020
@miniksa
Copy link
Member

miniksa commented Jul 16, 2020

@miniksa do we have an active megathread for ongoing character sizing issues? See also #6738

I don't think so. We keep flopping on this because I think these Emoji are ones that were retroactively converted to two-columns. We'll have to dig yet again.

However, submitters (@arish, @devcrev), it will immensely help the future investigator if you redirect the output from your prompts/commands to a file and attach it here. Then we can have access to the exact character stream that is causing you issues even if it takes us a while to get around to this.

@DHowett
Copy link
Member

DHowett commented Jul 16, 2020

This is because other terminals allow the arrow glyph to spill outside of its cell. It's "single-width", but rendered double-width. iTerm2 does this with the narrow emoji, as well. The character under the right half of the two-cell glyph draws on top of the right side of it. It's ugly, but effective, and people can use spaces to give the arrow/emoji room to grow.

@DHowett
Copy link
Member

DHowett commented Jul 16, 2020

I'll look for the duplicate.

@devcrev
Copy link

devcrev commented Jul 16, 2020

Sure!
Output from the Windows Terminal program is in terminal.txt. Output from the VScode program is in vs_code.txt.

terminal.txt
vs_code.txt

It was a little tricky to generate these files since the command ./node_modules/.bin/eslint --init walks the user through a series of questions. I snapshotted the captures at the moment the screens would look like they do in the screenshots I posted earlier (less the command that generated the output).

You will find the two files to be the same, i.e., binary equivalents.

@arish
Copy link
Author

arish commented Jul 17, 2020

Here are the outputs from Windows Terminal and Visual Studio Code's integrated terminal:

wt.txt
vscode.txt

@zadjii-msft zadjii-msft removed the Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting label Jul 28, 2020
@zadjii-msft zadjii-msft modified the milestones: Terminal v2.0, 22H2 Jan 4, 2022
@Izolentiy
Copy link

Hello there again! If someone is facing the same problem, I recommend to use another characters:
windows logo: "\ue70f", arrow: "\uf554"
You'll get this in VS Code
image
in Windows Terminal
image
Hope it helped someone to solve their problem.

@zadarmo
Copy link

zadarmo commented Apr 6, 2022

Hello there again! If someone is facing the same problem, I recommend to use another characters: windows logo: "\ue70f", arrow: "\uf554" You'll get this in VS Code image in Windows Terminal image Hope it helped someone to solve their problem.

You terminal is awesome! Could you please tell me how to show the branch icon before text "master" and the clock icon before time "23:15"?

@Izolentiy
Copy link

You terminal is awesome! Could you please tell me how to show the branch icon before text "master" and the clock icon before time "23:15"?

Sure! branch icon: "\ue0a0", clock icon: "\uf017".
If you want to have exactly the same theme as me. You can copy it from here and maybe modify it as you want on your local machine: https://github.com/Izolentiy/ThemesForApps/tree/master/WindowsTerminal
I uploaded my theme there. I think that exists better way to share my theme, but for faster result I did this.

@felipecrs
Copy link

Another example:

image

PS: Thanks @DHowett for pointing out this issue.

@zadarmo
Copy link

zadarmo commented Jun 15, 2022

You terminal is awesome! Could you please tell me how to show the branch icon before text "master" and the clock icon before time "23:15"?

Sure! branch icon: "\ue0a0", clock icon: "\uf017". If you want to have exactly the same theme as me. You can copy it from here and maybe modify it as you want on your local machine: https://github.com/Izolentiy/ThemesForApps/tree/master/WindowsTerminal I uploaded my theme there. I think that exists better way to share my theme, but for faster result I did this.

I‘m sorry to reply so late. But thanks! Your answer helps me a lot. Now I know they are just preset-icons of some theme.

@lhecker
Copy link
Member

lhecker commented Sep 14, 2022

@237dmitry you wrote "The default console looks much better." showing
Screenshot 2022-09-14 110951

And you're right. It does look better. This is because the default console uses the font's information to determine how many cells a glyph like that takes up. But as you can imagine that is quite problematic for terminal applications, since those can't actually "see" what's on the screen. As such people have decided that all glyphs that aren't listed in the Unicode Standard Annex #11 have a width of 1 column. That way terminal applications can blindly trust the terminal where it puts text on the screen again. (See #2066 for more information.)

But why do emojis and Nerd Font icons still work correctly in other terminals? Because they use Unicode Standard Annex #11 only to determine how the cursor moves, while the text itself is still drawn according to the font's information. So for instance the Nerd Font icon U+F07B (similar to 🗀) is supposed to take up 1 column, but other terminals draw it in the original 2 column wide size, overdrawing the text that follows it (in this case the whitespace after the icon). In other words, if you take other terminals and write "`u{f07b}xyz" it'll actually draw something like "🗀yz".

Now, normally this would be easy to fix: We just check the width of Nerd Font icons, right? Unfortunately, for some reason and quite annoyingly so, the "advance width" (aka how much the font file wants the cursor to move after drawing the glyph) of those icons isn't 2 but actually 1. The Nerd Font font files simply draw half the glyph outside the 1 column wide bounding box.
So the only way to consistently get that actual width of both Emojis and Nerd Font icons, etc., is by measuring the glyph which is fairly expensive.

A thorough fix is difficult and depends on us rendering the buffer contents off of a text buffer snapshot without console lock so that we can run the expensive measurements without blocking the entire application. A immediate, partial fix is to run those measurements inside the lock anyways, but only for Nerd Font icons since those hopefully don't occur that often. I'll have to think about this some more... but I am planning to solve it this year.

@ismailhkose
Copy link

ismailhkose commented Sep 29, 2022

I'd like to report same issue for different Unicode character.

Same issue for long arrow, "⟶", character ( U+27F6). It's rendered extremely small.

image

I changed font to "UbuntuMono Nerd Font" in Notepad, and pasted the character, "⟶", everything is fine with notepad.

Actual Behavior
image

I'd like to use long arrow in VIM to replace 'I^' character for tab indentation.

image

It's actually not clear even Windows terminal renders long arrow as arrow or different character. It's extremely small.

Actual behavior
image

Expected behavior:
image

@NoBurpees
Copy link

NoBurpees commented Feb 15, 2023

In 1.15.3465 (with activated new renderer) double width glyphs are displayed "correctly".

1 15 correct
(1.15 works)

1 16 wrong
(1.16 wrong)

@microsoft-github-policy-service microsoft-github-policy-service bot added the In-PR This issue has a related PR label Mar 6, 2023
microsoft-github-policy-service bot pushed a commit that referenced this issue Apr 26, 2023
This is practically a from scratch rewrite of AtlasEngine.

The initial approach used a very classic monospace text renderer, where
the viewport is subdivided into cells and each cell is assigned one
glyph texture, just like how real terminals used to work.
While we knew that it would have problems with overly large glyphs,
like those found in less often used languages, we didn't expect the
absolutely massive number of fonts that this approach would break.
For one, the assumption that monospace fonts are actually mostly
monospace has turned out to be a complete lie and we can't force users
to use better designed fonts. But more importantly, we can't just
design an entire Unicode fallback font collection from scratch where
every major glyph is monospace either. This is especially problematic
for vertical overhangs which are extremely difficult to handle in a
way that outperforms the much simpler alternative approach:
Just implementing a bog-standard, modern, quad-based text renderer.

Such an approach is both, less code and runs faster due to a less
complex CPU-side. The text shaping engine (in our case DirectWrite)
has to resolve text into glyph indices anyways, so using them directly
for text rendering allows reduces the effort of turning it back into
text ranges and hashing those. It's memory overhead is also reduced,
because we can now break up long ligatures into their individual glyphs.
Especially on AMD APUs I found this approach to run much faster.

A list of issues I think are either obsolete (and could be closed)
or resolved with this PR in combination with #14255:

Closes #6864
Closes #6974
Closes #8993
Closes #9940
Closes #10128
Closes #12537
Closes #13064
Closes #13527
Closes #13662
Closes #13700
Closes #13989
Closes #14022
Closes #14057
Closes #14094
Closes #14098
Closes #14117
Closes #14533
Closes #14877

## PR Checklist
* Enabling software rendering enables D2D mode ✅
* Both D2D and D3D:
  * Background appears correctly ✅✅
  * Text appears correctly
    * Cascadia Code Regular ✅✅
    * Cascadia Code Bold ✅✅
    * Cascadia Code Italic ✅✅
    * Cascadia Code block chars leave (almost) no gaps ✅✅
    * Terminus TTF at 13.5pt leaves no gaps between block chars ✅✅
    * ``"`u{e0b2}`u{e0b0}"`` in Fira Code Nerd Font forms a square ✅✅
  * Cursor appears correctly
    * Legacy small/medium/large ✅✅
    * Vertical bar ✅✅
    * Underscore ✅✅
    * Empty box ✅✅
    * Full box ✅✅
    * Double underscore ✅✅
  * Changing the cursor color works ✅✅
  * Selection appears correctly ✅✅
  * Scrolling in various manners always renders correctly ✅✅
  * Changing the text antialising mode works ✅✅
  * Semi-transparent backgrounds work ✅✅
  * Scroll-zooming the font size works ✅✅
  * Double-size characters work ✅✅
  * Resizing while text is printing works ✅✅
  * DWM `+Heatmap_ShowDirtyRegions` shows that only the cursor
    region is dirty when it's blinking ✅✅
* D2D
  * Margins are filled with background color ❌
    They're filled with the neighboring's cell background color for
    convenience, as D2D doesn't support `D3D11_TEXTURE_ADDRESS_BORDER`
* D3D
  * Margins are filled with background color ✅
  * Soft fonts work ✅
  * Custom shaders enable continous redraw if time constant is used ✅
  * Retro shader appears correctly ✅
  * Resizing while a custom shader is running works ✅
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-Fonts Related to the font Area-Rendering Text rendering, emoji, complex glyph & font-fallback issues In-PR This issue has a related PR Issue-Bug It either shouldn't be doing this or needs an investigation. Priority-3 A description (P3) Product-Terminal The new Windows Terminal.
Projects
None yet
Development

Successfully merging a pull request may close this issue.