Skip to content

Conversation

@pedro-mendonca
Copy link
Member

@pedro-mendonca pedro-mendonca commented Oct 5, 2022

What?

Highlight the leading and trailing spaces both in the preview and editor rows
Also highlight double and multiple spaces in the middle.

This PR also adds a missing unit test for the invisible characters markup added on prepare_original() for line breaks and tabs.

Why?

Allows the translator to see the spaces at the beginning or the end of an original/translation.
Allows authors and translators to see double and multiple spaces in the middle of strings.

How?

Wrap the spaces in a <span> with invisible-spaces class, which adds a grey color.

Testing Instructions

  1. Have some original string with spaces in the beginning or end, or with double spaces in the middle
  2. Open the translation set where the string appears, see the highlighted spaces in grey in the preview row, both in original and preview (since 7a31b0f)
  3. Open the translation string editor and see the highlighted spaces in grey, both in the original and translation.

imagem

imagem

Fixes #863.

@pedro-mendonca pedro-mendonca requested a review from amieiro October 5, 2022 13:43
@pedro-mendonca
Copy link
Member Author

pedro-mendonca commented Oct 5, 2022

@amieiro currently the Translation markup is added to editor <blockquote> through prepare_original(), which is probably wrong because also searches for glossary etc.
To add it to both the translation bloquote and preview row, maybe is better to use another function (prepare_translation_preview()) and add the highlight to it.

@pedro-mendonca
Copy link
Member Author

pedro-mendonca commented Oct 5, 2022

Using the prepare_original() in the translation of the preview row, as it's used for the current translation blockquote above the textarea, adds the markup. This function still uncessasry searches for glossary entries, but none will be found.

imagem

@pedro-mendonca
Copy link
Member Author

Added support for strings with multiple lines:
imagem

@pedro-mendonca
Copy link
Member Author

Adding another highlight: double/multiple spaces between words.

imagem

Changing the CSS to a darker color with opacity 50% so it works better on different backgrounds of the string status:

imagem

@pedro-mendonca pedro-mendonca changed the title Highlight leading and trailing spaces Highlight leading and trailing spaces, and double/multiple spaces in the middle Oct 20, 2022
@pedro-mendonca
Copy link
Member Author

Added unit tests for both the spaces highlight introduced in this PR, and the already existent markup for invisible characters as tabs and line breaks

@akirk
Copy link
Member

akirk commented Mar 8, 2023

We agreed on our triage session that this can be merged after a code review. The functionality is fine.

@amieiro amieiro merged commit b754d68 into GlotPress:develop Apr 19, 2023
@pedro-mendonca pedro-mendonca deleted the invisible-spaces branch April 19, 2023 10:01
@lmwp
Copy link

lmwp commented Aug 9, 2023

just ... thank you so much !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Highlight trailing spaces

4 participants