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

Webdev 5735 use screenname #879

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+49 −5
Open

Webdev 5735 use screenname #879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c55d83e
Test ver for screenname
mc2 Oct 22, 2023
4891f5d
Truncate unicode aware
mc2 Oct 23, 2023
9b7f910
Comments
mc2 Oct 25, 2023
181bece
Add screenname tests
mc2 Oct 31, 2023
f3fa166
Fix switch user button, add another
mc2 Oct 31, 2023
0fbc87e
Bump test value
mc2 Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ia-topnav/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
https://git.archive.org/www/offshoot/-/blob/main/guides/update-top-nav.md
## Installation

## Add to your project
```bash
yarn add @internetarchive/ia-topnav
```
Expand Down
2 changes: 1 addition & 1 deletion packages/ia-topnav/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@internetarchive/ia-topnav",
"version": "1.1.29",
"version": "1.1.30-alpha.2",
"description": "Top nav for Internet Archive",
"license": "AGPL-3.0-only",
"main": "index.js",
Expand Down
2 changes: 1 addition & 1 deletion packages/ia-topnav/src/ia-topnav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export default class IATopNav extends LitElement {
menuSetup() {
this.localLinks = this.getAttribute('localLinks') !== 'false' && this.getAttribute('localLinks') !== false;
this.username = this.getAttribute('username')
this.screenName = this.username; // set screenName when username changes to display
this.screenName = this.getAttribute('screenName') // this.username; // set screenName when username changes to display
this.waybackPagesArchived = this.getAttribute('waybackPagesArchived') ?? ''

// ensure we update other components that use `baseHost`
Expand Down
19 changes: 17 additions & 2 deletions packages/ia-topnav/src/primary-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,24 @@ class PrimaryNav extends TrackedElement {
);
}

get isRTL() {
// https://stackoverflow.com/questions/12006095/javascript-how-to-check-if-character-is-rtl
const ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF';
const rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC';
const rtlCheck = new RegExp('^[^'+ltrChars+']*['+rtlChars+']');

return rtlCheck.test(this.screenName);
}
Comment on lines +82 to +89
Copy link
Contributor

@latonv latonv Nov 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that browsers can also be made to perform this RTL character check natively, by adding a dir="auto" attribute to the enclosing element. The first strongly-directional character found in the element's text determines its overall directionality, placing nondirectional characters (like the ellipsis) on the corresponding side automatically: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

(Maybe that wouldn't apply to this use case, but just figured I'd point it out as an option to explore)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Laton, yes, aware of dir="auto" and that, if I'm not mistaken, requires an rendered element to work on.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it's true that the RTL checks would take place at render time rather than during JS execution, and the result would not be readily available to our code.

My thinking was that if we can get the browser to do all the RTL detection & rendering work for us natively, then we may not need JS-based RTL checks in the first place. Using dir="auto", the browser can determine which side to visually render the ellipsis on without our JS having to know anything about the directionality of the text.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your considered discussion.
I checked with Jim Shelton about having truncation/ellipsis by max-width and not 9 characters. Gets rid of a good deal of code, which makes sense to me.


get truncatedScreenName() {
if (this.screenName && this.screenName.length > 10) {
return `${this.screenName.substr(0, 9)}…`;
if (this.screenName && [...this.screenName].length > 10) {
// Works with RTL and Unicode
const truncated = [...this.screenName].slice(0, 9).join('');
Comment on lines 91 to +94
Copy link
Contributor

@latonv latonv Nov 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for handling multibyte code points sensibly!

I'm curious, are screen names always stored in NFC-normalized form? If we don't have that guarantee, one additional step that might help here is normalizing the screen name string before any length-checking or truncation, to collapse any combining characters down to their "combined" form if possible. If a name has multiple combining accents that don't contribute to the visual width of the string, for instance, we can avoid including those in the length budget. Notably, this also prevents us from accidentally truncating an accent off, at least in cases where the combined character exists.

const normalizedScreenName = this.screenName.normalize('NFC');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Laton, I'd like to do more tests, but I believe converting the string into an array is the simplest mechanism for splitting a multibyte string by grouped (in a single character) sequence of code points.

If we use normalization to count, we might break the visual display of the original character -- or more complicated counting of normalized str.length.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The array conversion you're doing is indeed a great, simple way to get the sequence of multibyte code points from the original string. I fully endorse that approach!

Normalization here would accomplish a different goal: ensuring that sequences of separate code points that can be represented by an equivalent single one are always collapsed to the single-code-point version prior to the array conversion & truncation.

To demonstrate what I mean, consider a screen name like déjà rêvé, which contains several accents. These can either be encoded using combining characters (like e + ́ ), or with pre-combined accented letters like é. Note that in the first case, the letter and its accent are considered two separate code points.

So [...'déjà rêvé'].length is 13 when the accents are encoded as combining characters. Notice that without normalization, [...'déjà rêvé'].slice(0, 9).join('') produces 'déjà re' with the accent erroneously dropped from the final e.

[...'déjà rêvé'].length is 9 when the accents have instead been collapsed into their adjoining letters via normalization, so the string does not require truncation at all. (However, if we were to truncate it, we would not risk splitting up a letter with its accents like the above, because each letter/accent combination is now a single code point).

If anything, this should preserve the visual display of the original characters in cases where they would otherwise be broken apart.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the detailed explanation. I'll use this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are, of course, further cases where even this normalization fails to help, and to address those we would need to consider entire grapheme clusters, which is substantially more involved. Consider tricky usernames like:

  • hello! 👩🏾‍🚀 (many clients will render a single emoji comprising the final four code points; truncation in the middle of this sequence will result in a different emoji altogether)
  • संवर्तस्थायिकल्प (contains several combining diacritics that have no corresponding pre-combined form)

(I'm not advocating that we deal with cases like those within the scope of this ticket! Just pointing it out for a clear sense of where the edges are.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tested many different in-browser truncations of multiple code point characters in Chrome, FF, Edge, and Brave. The browsers have never chopped a multi-point character (can't really tell with the Indian(?) script above -- even with non-normalized composition unicode.

I've chosen to not normalize and rely on in-browser truncation. Code to follow after fixing problem with static top nav.

Copy link
Contributor Author

@mc2 mc2 Nov 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW: https://developer.mozilla.org/en-US/play
HTML:

<div id="parent">
  <div id="child">
    Fusce pr संवर्तस्थायिकल्प vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

CSS

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good -- normalization would only be required if you're slicing up the string yourself. No need if we're going to use CSS truncation instead (which I assume is based on the width of rendered text, rather than the underlying text encoding).

if (this.isRTL) {
return `…${truncated}`;
} else {
return `${truncated}…`;
}
}
return this.screenName;
}
Expand Down
24 changes: 24 additions & 0 deletions packages/ia-topnav/test/primary-nav.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,30 @@ describe('<primary-nav>', () => {
expect(usernameSpan.innerText).to.equal('somesuper…');
});

it('truncates a long screen name with extended characters', async () => {
const el = await fixture(component({
baseHost: 'archive.org',
username: '@foo',
screenName: 'a😊b😊c😊d😊😊😊😊😊😊😊😊',
}));

const usernameSpan = el.shadowRoot.querySelector('.username');

expect(usernameSpan.innerText).to.equal('a😊b😊c😊d😊😊…');
});

it('truncates a long screen name with RTL extended characters', async () => {
const el = await fixture(component({
baseHost: 'archive.org',
username: '@foo',
screenName: ' الدكتور محمالدكتور محمد العجوز',
}));

const usernameSpan = el.shadowRoot.querySelector('.username');

expect(usernameSpan.innerText).to.equal('… الدكتور ');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

});

it('opens a slot with `secondIdentitySlotMode`', async () => {
const el = await fixture(component({
baseHost: 'archive.org',
Expand Down
6 changes: 5 additions & 1 deletion www/ia-topnav/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,14 @@
<h1>demo</h1>


<button onclick="document.querySelector('ia-topnav').setAttribute('username', 'brewster')">
<button onclick="document.querySelector('ia-topnav').setAttribute('screenname', 'brewster'); document.querySelector('ia-topnav').setAttribute('username', '@brewster')">
switch username to brewster
</button>
<br>
<button onclick="document.querySelector('ia-topnav').setAttribute('screenname', 'a😊b😊c😊d😊e😊f😊g😊h😊i😊'); document.querySelector('ia-topnav').setAttribute('username', '@test')">
switch username to a😊b😊c😊d😊e😊f😊g😊h😊i😊
</button>
<br>
<button onclick="document.querySelector('ia-topnav').removeAttribute('username')">
switch to un-logged-in
</button>
Expand Down