Skip to content
Cyril Levis edited this page May 11, 2023 · 7 revisions

How to style workspaces with html tags and keep the natural sorting order in waybar?

Suppose you want to use format.workspace config to make the workspace numbers red. One potential configuration would look like so:

[format]
workspace = "<span color='red'>{id}:</span>{delim}{clients}"

However what you'll discover is that natural sorting order is no longer applied, e.g. workspace 10 will be before workspace 1, like so:

image

This happens because waybar seems to be parsing numbers as the very first characters in the workspace names, and if it finds numbers, then it sorts the workspaces as numbers (10 > 1 in "10:" and "1:") as opposed to characters ('1' == '1', '0' < ':' in "10:" and "1:").

In other words, if you want to preserve natural sorting order of the workspaces, you must have {id} as the very first item in your format.workspace config.

The goal of having red numbers is achievable by setting the color of numbers in waybar's style.css:

#workspaces button {
  color: red;
}

And then in format.workspace color everything else instead, e.g. like so:

[format]
workspace = "{id}:<span color='white'>{delim}{clients}</span>"

The result is the expected behavior:

image

Waybar workspace not clickable ?

You need the good waybar patch until it is not yet in flake/AUR package https://aur.archlinux.org/packages/waybar-hyprland-git#comment-912717

diff --git a/src/modules/wlr/workspace_manager.cpp b/src/modules/wlr/workspace_manager.cpp
index 6a496e6f..51ea8f25 100644
--- a/src/modules/wlr/workspace_manager.cpp
+++ b/src/modules/wlr/workspace_manager.cpp
@@ -6,6 +6,7 @@

 #include <algorithm>
 #include <iterator>
+#include <regex>
 #include <stdexcept>
 #include <vector>

@@ -511,7 +512,9 @@ auto Workspace::handle_clicked(GdkEventButton *bt) -> bool {
   if (action.empty())
     return true;
   else if (action == "activate") {
-    zext_workspace_handle_v1_activate(workspace_handle_);
+    const std::string sanitized_name = std::regex_replace(name_, std::regex("'"), "'\\''");
+    const std::string command = "hyprctl dispatch workspace '" + sanitized_name + "'";
+    system(command.c_str());
   } else if (action == "close") {
     zext_workspace_handle_v1_remove(workspace_handle_);
   } else {
Clone this wiki locally