Add hints alignment x slot

source/changelog.lisp

@@ -850,9 +850,9 @@ a scalable icon."))))
   (:nsection :title "Features"
     (:ul
      (:li "Add new slots "
-          (:nxref :class-name 'nyxt/mode/hint:hint-mode :slot 'nyxt/mode/hint:hints-offset-x)
+          (:code "nyxt/mode/hint:hints-offset-x")
           " and "
-          (:nxref :class-name 'nyxt/mode/hint:hint-mode :slot 'nyxt/mode/hint:hints-offset-y)
+          (:code "nyxt/mode/hint:hints-offset-y")
           ", to change the position of hint overlays.")))
   (:nsection :title "Bug fixes"
     (:ul

source/mode/hint.lisp

@@ -70,16 +70,20 @@ define which elements are picked up by element hinting.
 For instance, to include images:
 
     a, button, input, textarea, details, select, img:not([alt=\"\"])")
-   (hints-offset-x
+   (x-translation
     0
     :type integer
-    :documentation "The number of pixels that hint overlays are horizontally shifted by.
+    :documentation "The horizontal translation as a percentage of the hint's size.
 A positive value shifts to the right.")
-   (hints-offset-y
+   (y-translation
     0
     :type integer
-    :documentation "The number of pixels that hint overlays are vertically shifted by.
+    :documentation "The vertical translation as a percentage of the hint's size.
 A positive value shifts to the bottom.")
+   (x-placement
+    :left
+    :type keyword
+    :documentation "The horizontal placement of the hints: either `:left' or `:right'.")
    (keyscheme-map
     (define-keyscheme-map "hint-mode" ()
       keyscheme:cua
@@ -112,37 +116,48 @@ A positive value shifts to the bottom.")
   ((default-modes (cons 'hint-mode %slot-value%))))
 
 (define-parenscript-async hint-elements (hints)
-  (defun create-hint-overlay (original-element hint)
+  (defun create-hint-element (hint)
+    (let ((hint-element (ps:chain document (create-element "span"))))
+      (setf (ps:@ hint-element class-name) "nyxt-hint"
+            (ps:@ hint-element id) (+ "nyxt-hint-" hint)
+            (ps:@ hint-element text-content) hint)
+      hint-element))
+
+  (defun set-hint-element-style (hint-element hinted-element)
+    (let ((right-x-alignment-p (eq (ps:lisp (x-placement (find-submode 'hint-mode)))
+                                   :right))
+          (rect (ps:chain hinted-element (get-bounding-client-rect)))
+          (hinted-element-font-size (ps:@ (ps:chain window (get-computed-style hinted-element))
+                                          font-size)))
+      (setf (ps:@ hint-element style position) "absolute"
+            (ps:@ hint-element style top) (+ (ps:@ window scroll-y) (ps:@ rect top) "px")
+            (ps:@ hint-element style left) (+ (ps:@ window scroll-x) (ps:@ rect left)
+                                              (when right-x-alignment-p (ps:@ rect width)) "px")
+            (ps:@ hint-element style transform)
+            (+ "translate("
+               (+ (when right-x-alignment-p -100)
+                  (ps:lisp (x-translation (find-submode 'hint-mode))))
+               "%, "
+               (ps:lisp (y-translation (find-submode 'hint-mode)))
+               "%)"))
+      (when (> (parse-float hinted-element-font-size) 5)
+        (setf (ps:@ hint-element style font-size) hinted-element-font-size))))
+
+  (defun create-hint-overlay (hinted-element hint)
     "Create a DOM element to be used as a hint."
-    (ps:let ((user-x-offset (ps:lisp (hints-offset-x (find-submode 'hint-mode))))
-             (user-y-offset (ps:lisp (hints-offset-y (find-submode 'hint-mode))))
-             (rect (ps:chain original-element (get-bounding-client-rect)))
-             (element (ps:chain document (create-element "span"))))
-      (setf (ps:@ element class-name) "nyxt-hint"
-            (ps:@ element style position) "absolute"
-            (ps:@ element style left) (+ (ps:max (+ (ps:@ window page-x-offset)
-                                                    (ps:@ rect left)
-                                                    user-x-offset)
-                                                 0)
-                                         "px")
-            (ps:@ element style top) (+ (ps:max (+ (ps:@ window page-y-offset)
-                                                   (ps:@ rect top)
-                                                   user-y-offset)
-                                                0)
-                                        "px")
-            (ps:@ element id) (+ "nyxt-hint-" hint)
-            (ps:@ element text-content) hint)
-      element))
+    (let ((hint-element (create-hint-element hint)))
+      (set-hint-element-style hint-element hinted-element))
+    hint-element)
 
   (let ((hints-parent (ps:chain document (create-element "div")))
         (hints (ps:lisp (list 'quote hints)))
         (i 0))
-    (dolist (element (nyxt/ps:qsa document "[nyxt-hintable]"))
+    (dolist (hinted-element (nyxt/ps:qsa document "[nyxt-hintable]"))
       (let ((hint (aref hints i)))
-        (ps:chain element (set-attribute "nyxt-hint" hint))
-        (ps:chain hints-parent (append-child (create-hint-overlay element hint)))
+        (ps:chain hinted-element (set-attribute "nyxt-hint" hint))
+        (ps:chain hints-parent (append-child (create-hint-overlay hinted-element hint)))
         (when (ps:lisp (show-hint-scope-p (find-submode 'hint-mode)))
-          (ps:chain element class-list (add "nyxt-element-hint")))
+          (ps:chain hinted-element class-list (add "nyxt-element-hint")))
         (setf i (1+ i))))
     (setf (ps:@ hints-parent id) "nyxt-hints"
           (ps:@ hints-parent style) "all: unset !important;")

tests/renderer-offline/hint-mode-html-document.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Hint test page</title>
+  <style>
+    body { margin:0; }
+    a { position:absolute; }
+    a.left { left:1px; }
+    a.center { left:50%; }
+    a.right { right:1px; }
+    a.top { top:1px; }
+    a.middle { top:50%; }
+    a.bottom { bottom:1px; }
+    a.bigger { font-size:24px; }
+  </style>
+</head>
+
+<body>
+  <a href="https://nyxt-browser.com/" class="left top bigger">left top</a>
+  <a href="https://nyxt-browser.com/" class="center top">center top</a>
+  <a href="https://nyxt-browser.com/" class="right top">right top</a>
+  <a href="https://nyxt-browser.com/" class="left middle">left middle</a>
+  <a href="https://nyxt-browser.com/" class="center middle bigger">center middle</a>
+  <a href="https://nyxt-browser.com/" class="right middle">right middle</a>
+  <a href="https://nyxt-browser.com/" class="left bottom">left bottom</a>
+  <a href="https://nyxt-browser.com/" class="center bottom">center bottom</a>
+  <a href="https://nyxt-browser.com/" class="right bottom bigger">right bottom</a>
+</body>
+</html>