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

Don't relayout page when adding term #482

Closed
vpzomtrrfrt opened this issue Sep 19, 2024 · 5 comments
Closed

Don't relayout page when adding term #482

vpzomtrrfrt opened this issue Sep 19, 2024 · 5 comments
Labels
bug Something isn't working fixed Fixed in develop or master, to be launched. good first issue Good for newcomers UI

Comments

@vpzomtrrfrt
Copy link

Is your feature request related to a problem? Please describe.

Not sure if this is relevant for most languages, but I'm using Lute to study Japanese, and saving a term that spans multiple lines causes the text to rearrange to move it onto the same line

Describe the solution you'd like

I think I would prefer the text stay as is. For initial load it would be fine, but changing while I'm trying to read is jarring

Describe alternatives you've considered

Ignoring the problem

Additional context

Before:
image

After:
image

@jzohrab
Copy link
Collaborator

jzohrab commented Sep 19, 2024

Thanks @vpzomtrrfrt - I agree it can be disconcerting. It happens because the terms are wrapped in an HTML <span> tag ... I'll see if I can find a quick fix. Maybe another smart person can chip in as well. Cheers!

@jzohrab jzohrab added this to Lute-v3 Sep 19, 2024
@jzohrab jzohrab added the bug Something isn't working label Sep 19, 2024
@jzohrab
Copy link
Collaborator

jzohrab commented Sep 19, 2024

I'm not able to get this to work correctly, given my very limited CSS skills. I've pushed a branch wip_issue_482_page_layout_hack_css to the repo with some hack work which got nowhere.

Below's an example using the tutorial:

image

The text "to navigate" is a multiword term, and is rendered as a <span> element: <span id="ID-53-3" class="textitem ..." ...>to&nbsp;navigate</span> . The textitem class is defined in the lute/static/css/styles.css:

/* A word shown in the reading pane. */
span.textitem {
    font-size: 16px;
    color: var(--font-color);
    display:inline-block;

I've tried various hacks for the display, word-wrap, and white-space css attributes for the textitem class, as well as various things for the enclosing div. I couldn't get the textitem to break across different lines.

The <span> elements are necessary for Lute to properly handle clicks, drags, etc.

Maybe someone with better CSS skills than I can suggest fixes.

@jzohrab jzohrab added good first issue Good for newcomers UI labels Sep 19, 2024
@jzohrab
Copy link
Collaborator

jzohrab commented Sep 20, 2024

ok, I think this is fixed, which is nice.

e.g., tutorial excerpt:

image

new multiword term added, wraps to next line:

image

Japanese example:

image

@jzohrab
Copy link
Collaborator

jzohrab commented Sep 20, 2024

Fixed in develop, will be in the next launch.

@jzohrab jzohrab added the fixed Fixed in develop or master, to be launched. label Sep 20, 2024
@jzohrab jzohrab moved this to Done in Lute-v3 Sep 20, 2024
@jzohrab
Copy link
Collaborator

jzohrab commented Sep 20, 2024

Launched in 3.5.3, should be fixed now, thank you!

@jzohrab jzohrab closed this as completed Sep 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working fixed Fixed in develop or master, to be launched. good first issue Good for newcomers UI
Projects
Archived in project
Development

No branches or pull requests

2 participants