Sélection de texte à poignées

{
  "name": "Sélection de texte à poignées",
  "family": "shape",
  "ref": "ref-24-finengy-paper-selection",
  "intent": "Accentuer UN mot dans une phrase en imitant la sélection de texte d'un téléphone — bandeau translucide, barre verticale à chaque bout, pastille en haut à gauche et en bas à droite — pour que l'accent se lise comme un geste du lecteur et non comme un surligneur de bureau.",
  "when_to_use": "Un seul mot ou groupe court à faire ressortir dans une chute de post social ou de page. L'accent est plus vivant qu'un `<mark>` et plus sobre qu'un aplat : il suggère que quelqu'un vient de poser le doigt sur ce mot.",
  "avoid_when": "La sélection porterait sur plus d'une ligne (le bandeau perd sa lecture de sélection et écrase la hiérarchie), le mot est en fin de phrase avec sa ponctuation (le point doit rester HORS du span, sinon la poignée le mange), ou la même carte porte déjà un aplat d'accent — deux accents dans une zone se neutralisent.",
  "media": [
    "social",
    "web",
    "slide"
  ],
  "tags": [
    "selection",
    "surlignage",
    "highlight",
    "marqueur",
    "poignee",
    "handle",
    "mobile",
    "telephone",
    "ios",
    "accent",
    "mot",
    "inline",
    "texte",
    "bandeau",
    "translucide",
    "geste"
  ],
  "vars": [
    {
      "name": "--vl-select",
      "role": "aplat du bandeau — TRANSLUCIDE : c'est ce qui le fait lire comme une sélection et non comme un fond",
      "default": "rgba(253,195,0,0.55)"
    },
    {
      "name": "--vl-handle",
      "role": "barres et pastilles — pleines, dans l'encre, jamais dans la couleur du bandeau",
      "default": "#142A4E"
    },
    {
      "name": "--vl-handle-bar",
      "role": "épaisseur de la barre verticale ; c'est elle qui fixe le décalage hors du bandeau",
      "default": "6px"
    },
    {
      "name": "--vl-handle-dot",
      "role": "diamètre de la pastille — 5 × l'épaisseur de barre",
      "default": "30px"
    },
    {
      "name": "--vl-bg",
      "role": "sol sous le texte, contre lequel le contraste se mesure",
      "default": "#F6F5F1"
    },
    {
      "name": "--vl-ink",
      "role": "encre de la phrase porteuse",
      "default": "#142A4E"
    }
  ],
  "slots": [
    "phrase",
    "mot-selectionne"
  ],
  "geometry": {
    "root": ".vl-text-selection",
    "frame": [
      860,
      200
    ],
    "ratios": {
      "dot_over_bar": 5,
      "bar_over_fontsize": 0.079,
      "pad_x_over_fontsize": 0.1
    },
    "type_px": {
      "phrase": 76
    },
    "pad_ratio": {
      "top": 0,
      "x": 0,
      "bottom": 0
    }
  },
  "benchmarks": [
    {
      "name": "BARRES COLLÉES : le bord droit de la poignée gauche touche le bord gauche du bandeau",
      "measure": "Math.abs(box('.vl-text-selection__h--a').right - box('.vl-text-selection__sel').left)",
      "max": 0.6
    },
    {
      "name": "BARRES COLLÉES : le bord gauche de la poignée droite touche le bord droit du bandeau",
      "measure": "Math.abs(box('.vl-text-selection__h--b').left - box('.vl-text-selection__sel').right)",
      "max": 0.6
    },
    {
      "name": "la barre court sur TOUTE la hauteur du bandeau",
      "measure": "box('.vl-text-selection__h--a').h / box('.vl-text-selection__sel').h",
      "expect": 1,
      "tol": 0.02
    },
    {
      "name": "pastille = 5 × l'épaisseur de barre",
      "measure": "parseFloat(cs('.vl-text-selection','--ts-dot')) / parseFloat(cs('.vl-text-selection','--ts-bar'))",
      "expect": 5,
      "tol": 0.35
    },
    {
      "name": "ASYMÉTRIE : la pastille gauche est en haut, à demi-diamètre au-dessus du bandeau",
      "measure": "Math.abs(parseFloat(cs('.vl-text-selection__h--a','--ts-dot')) / 2 + parseFloat(getComputedStyle($('.vl-text-selection__h--a'),'::before').top))",
      "max": 1.2
    },
    {
      "name": "LE BANDEAU EST TRANSLUCIDE — un aplat plein cesserait de se lire comme une sélection",
      "measure": "(function(){var p=cs('.vl-text-selection__sel','backgroundColor').replace(/[^0-9.,]/g,'').split(',');return p.length===4?parseFloat(p[3]):1;})()",
      "min": 0.25,
      "max": 0.75
    },
    {
      "name": "le bandeau survit à un passage à la ligne : ses décorations sont clonées",
      "measure": "cs('.vl-text-selection__sel','boxDecorationBreak') === 'clone' || cs('.vl-text-selection__sel','-webkit-box-decoration-break') === 'clone' ? 1 : 0",
      "expect": 1
    },
    {
      "name": "les poignées ne sont PAS placées par un script : elles sont en position absolue dans le span",
      "measure": "cs('.vl-text-selection__h--a','position') === 'absolute' && cs('.vl-text-selection__sel','position') === 'relative' ? 1 : 0",
      "expect": 1
    },
    {
      "name": "contraste de la phrase porteuse ≥ 4,5",
      "measure": "contrast('.vl-text-selection__p')",
      "min": 4.5
    },
    {
      "name": "aucun débordement du fragment",
      "measure": "overflow('.vl-text-selection')",
      "max": 0
    }
  ],
  "notes": "Le placement des poignées a été tenté TROIS fois en JavaScript le 25/08/2026 — `getClientRects()`, puis le dernier rect de la dernière ligne, puis `getBoundingClientRect()` — et les trois ont posé la barre droite SUR la dernière lettre : les rects d'un inline ne coïncident pas avec le bord du fond réellement peint (padding + `box-decoration-break: clone`), et l'écart de ~26 px ne se voyait dans aucune mesure. La seule construction juste est celle-ci : le span devient le repère (`position: relative`), les poignées sont ses enfants absolus, et le décalage vaut EXACTEMENT l'épaisseur de barre — donc elles restent collées quelle que soit l'échelle. Corollaire de composition : la ponctuation finale reste hors du span, sinon la poignée droite la recouvre. L'asymétrie des pastilles (haut-gauche / bas-droite) n'est pas décorative : c'est elle qui fait reconnaître une sélection système plutôt qu'un surlignage — les mettre toutes deux en haut casse la lecture sans casser aucune mesure.",
  "id": "shape-05-text-selection"
}