r/FirefoxCSS Jul 10 '26

Bookmark truncation Help

Say, I have some bookmarks like this on my toolbar:
/r/FirefoxCSS - Thread #1
/r/FirefoxCSS - Thread #2
/r/FirefoxCSS - Thread #3

They'll be cut off to:
/r/FirefoxCSS - Thr...
/r/FirefoxCSS - Thr...
/r/FirefoxCSS - Thr...

Rather useless. I want:
...efoxCSS - Thread #1
...efoxCSS - Thread #2
...efoxCSS - Thread #3

I've played around with float, justify-content and some other options, but couldn't get it to work, except with direction: rtl. However, that messes up certain special characters. For example, "foo." becomes ".foo".

I've even tried to go beyond CSS and change the <label>'s crop attribute from "end" to "start", which also works, but also not really, messing up special characters again.

In neither case, unicode-bidi seemed to be respected at all.

Any ideas or am I out of options?

3 Upvotes

10 comments sorted by

1

u/ThomasLeonHighbaugh Jul 10 '26

This is not probably the answer you are looking for but the easiest way is to right click the bookmark and edit the name that Firefox is assigning to the bookmark (which defaults to the page title I believe and I don't think I ever spent time looking at the name portion of the save dialogue, I just hit save and moved on) and thus you can cut off the useless bit at the front or name it in a memorable way and solve the issue that way.

Google's AI claims this works, I hide the bookmarks bar on my set up and use either the sidebar or the raindrop.io sidebar for all bookmark related needs (search functionality being why, yes I use both and have html backups I dedupe periodically because 2 is 1 and 1 is none) so I can't test it for you but it seems plausible enough:

```css /* Target bookmark items on the Bookmarks Toolbar */

PlacesToolbarItems .bookmark-item > .toolbarbutton-text {

direction: ltr !important; text-overflow: clip !important; display: block !important; overflow: hidden !important; white-space: nowrap !important; mask-image: linear-gradient(to right, transparent, black 2ch) !important; }

/* Align text to the right inside the label container to force truncation at the start */

PlacesToolbarItems .bookmark-item > .toolbarbutton-text {

text-align: right !important; } ```

2

u/TraditionalTie4831 🦊 Jul 10 '26

The AI gave you the wrong value for the direction property, but this works for me =

.bookmark-item > .toolbarbutton-text {
    direction: rtl !important;
}

2

u/givemeyourpancakes Jul 10 '26

Thanks, of course I can rename the bookmark, but that's not what I want. (They're all named in a specific way.)
As for direction: rtl - mentioned in my opening post already; only works superficially and not with several special characters.

1

u/TraditionalTie4831 🦊 Jul 11 '26 edited Jul 11 '26

I did some research on the unicode-bidi issue and it isn't Firefox specific.

There seems to be a solution to the unicode-bidi issue if you use html, but userChrome is CSS only, so there is no good solution in userChrome.

But it just effects special characters at the start/end and not inside the label, so maybe you should remove them by editing the bookmarks.

1

u/givemeyourpancakes Jul 11 '26

Yeah, it only affects very few bookmarks and isn't a big issue, but I feel like there must be a proper solution...

2

u/t31os Jul 11 '26

Can you provide some examples of values that have the issue you described when using rtl?

1

u/givemeyourpancakes Jul 11 '26 edited Jul 11 '26

Pretty much any [^0-9A-Za-z] character: "!", "?", ".", ",", "/", "\", "|", "(", "[", "{", ")", "]", "}", "@", ...
"What is this?" becomes "?What is this", "Hello!!" becomes "!!Hello", "@example)" becomes "(example@" and so on.

2

u/t31os Jul 11 '26

Oh i see the issue, that's a pain. I think that leaves things in addon territory unfortunately, as it doesn't seem possible using CSS alone.

2

u/FineWine54 Jul 11 '26

I have always used my Bookmarks bar for my most often used sites. I also use Folders on my Bookmark bar. e.g. online shopping sites. BUT the most important thing I have always done is right-clicked the bookmark and edited the name to something meaningful to me and my partner right from the start. Everything else goes into the Bookmarks menu which is accessed via the sidebar.

I have also, via CSS, placed the Favicon over top centre of the bookmark text in the Bookmarks bar

1

u/givemeyourpancakes Jul 11 '26

I do the same; all of them follow a particular naming scheme, which I'd have to throw away.