FAQ

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:

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:

Waybar workspace not clickable ?

With the last hyprland master branch and waybar with experimental flag on, without a patch, it should now just works !

Otherwise, the legacy way was:

In order to be able to click on a workspace using <span> class tuning in our formatter, like this issue https://github.com/hyprland-community/hyprland-autoname-workspaces/issues/51

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 {

Formatters config example

Can be find here. Feel free to share your config !