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.

Sign up for GitHub

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

Jump to bottom

Text shifted down with some characters truncated on Firefox with xtermjs 4.12.0 #3353

Closed
dstein64 opened this issue May 28, 2021 · 5 comments
Closed

Text shifted down with some characters truncated on Firefox with xtermjs 4.12.0 #3353

dstein64 opened this issue May 28, 2021 · 5 comments
Labels
area/addon/canvas browser/firefox Only affects Mozilla Firefox type/bug Something is misbehaving
Milestone
4.15.0

Comments

@dstein64
Copy link
Contributor

dstein64 commented May 28, 2021 •
edited
Loading

Details

  • Browser and browser version: Firefox 88.0.1
  • OS version: Ubuntu 20.10
  • xterm.js version: 4.12.0

Steps to reproduce

Create a page with the following code:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css" />
    <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
    const config = {
        rendererType: 'canvas',
        fontFamily: 'monospace',
    };
    const term = new Terminal(config);
    term.open(document.getElementById('terminal'));
    term.writeln('Hello world! {Line 1}.');
    term.write('Hello world! {Line 2} $ ');
</script>
</body>
</html>

The output has text shifted down (relative to version 4.11.0) with some characters truncated (e.g., see the "{" and "}" characters).

4_12

Here's a screenshot using version 4.11.0, where the text is not shifted down nor truncated.

4_11

This issue occurs on Firefox, but not on Chrome.
@dstein64
Copy link
Contributor Author

Running git bisect indicates that the issue started with commit a510ffb.

@dstein64
Copy link
Contributor Author

Truncated text can be seen when using GitHub Codespaces on Firefox, but not Chrome.

This might be related to the issue reported here.

However, for Codespaces the truncated text only occurs at the bottom of the screen, as opposed to occurring generally, which suggests it might not be related to the issue here.

For example, here's a screenshot, where the "{}" is only truncated at the bottom.

truncated_text_at_bottom

@dstein64 dstein64 mentioned this issue May 30, 2021
Closed
@Tyriar Tyriar added area/renderer browser/firefox Only affects Mozilla Firefox type/bug Something is misbehaving labels Jun 2, 2021
@urish urish mentioned this issue Jun 10, 2021
Closed
@dstein64 dstein64 mentioned this issue Jun 16, 2021
Merged
@schrej schrej mentioned this issue Jun 30, 2021
Closed
@nirui nirui mentioned this issue Aug 20, 2021
Closed
@nirui
Copy link

nirui commented Aug 20, 2021 •
edited
Loading

Not sure how this issue is going, but I think bottom is a better solution than ideographic.

From: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

"ideographic"
The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)

"bottom"
The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.

Also, maybe another approach is to make it possible for users to adjust the baseline settings, since textBaseline property (along with all the other client text related properties, really) is a mess. Simply lock the option down to one might never be a good idea.

And then some demos:

@Tyriar
Copy link
Member

Tyriar commented Aug 31, 2021

@nirui I think bottom ended up cutting off a bunch of characters as they exceeded the measured dimensions of the cells, see #3370 (review)

@cdanielw cdanielw mentioned this issue Oct 14, 2021
Closed
@meganrogge meganrogge added this to the 4.15.0 milestone Nov 5, 2021
@dstein64
Copy link
Contributor Author

dstein64 commented Nov 5, 2021

This was resolved in #3370.

I no longer encounter the issue after updating xtermjs to v4.15.0.

@dstein64 dstein64 closed this as completed Nov 5, 2021
@Tyriar Tyriar mentioned this issue Dec 21, 2021
Closed
@ankoh ankoh mentioned this issue Mar 12, 2022
Closed
@bb010g bb010g mentioned this issue Nov 14, 2022
Open
@pearmini pearmini mentioned this issue Jul 12, 2023
Merged
@zmb3 zmb3 mentioned this issue Jul 14, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area/addon/canvas browser/firefox Only affects Mozilla Firefox type/bug Something is misbehaving
Projects
None yet
Milestone
4.15.0
Development

No branches or pull requests
4 participants
@dstein64 @Tyriar @meganrogge @nirui