Merge pull request #195 from ufal/fix-underline-for-descended-glyphs

Use text-decoration-skip-ink for better underlining
ufal · Jan 29, 2025 · 6f17239 · 6f17239
2 parents 08bd670 + b6c2bfc
commit 6f17239
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/factgenie/config/crowdsourcing/example.yaml b/factgenie/config/crowdsourcing/example.yaml
@@ -19,10 +19,10 @@ annotator_instructions: |-
 
   There are four types of errors that you can mark in the generated text:
 
-  1.  <span style="color: rgb(214, 39, 40); text-decoration: underline; text-decoration-thickness: 2px;"><b>Incorrect fact</b></span>: The fact in the text contradicts the data.
-  2.  <span style="color: rgb(148, 103, 189); text-decoration: underline; text-decoration-thickness: 2px;"><b>Not checkable</b></span> : The fact in the text cannot be checked given the data.
-  3.  <span style="color: rgb(230, 171, 2); text-decoration: underline; text-decoration-thickness: 2px;"><b>Misleading</b></span>: The fact in the text is misleading in the given context.
-  4.  <span style="color: rgb(102, 102, 102); text-decoration: underline; text-decoration-thickness: 2px;"><b>Other</b></span> : The text is problematic for another reason, e.g. grammatically or stylistically incorrect, irrelevant, or repetitive.
+  - <span style="color: rgb(214, 39, 40); text-decoration: underline; text-decoration-thickness: 4px; text-decoration-skip-ink: none"><b>Incorrect</b></span>: The fact in the text contradicts the data.
+  - <span style="color: rgb(148, 103, 189); text-decoration: underline; text-decoration-thickness: 4px; text-decoration-skip-ink: none"><b>Not checkable</b></span>: The fact in the text cannot be checked given the data.
+  - <span style="color: rgb(230, 171, 2); text-decoration: underline; text-decoration-thickness: 4px; text-decoration-skip-ink: none"><b>Misleading</b></span>: The fact in the text is misleading in the given context.
+  - <span style="color: rgb(102, 102, 102); text-decoration: underline; text-decoration-thickness: 4px; text-decoration-skip-ink: none"><b>Other</b></span>: The text is problematic for another reason, e.g. grammatically or stylistically incorrect, irrelevant, or repetitive.
 
   You can annotate the errors by selecting the appropriate error category and dragging your mouse over the text, highlighting the error span.
 

diff --git a/factgenie/static/js/campaigns.js b/factgenie/static/js/campaigns.js
@@ -276,7 +276,7 @@ function prefillInstructions() {
 
     var errorList = [];
     annotationSpanCategories.forEach((category) => {
-        const span = `- <span style="color: ${category.color}; text-decoration: underline; text-decoration-thickness: 4px;"><b>${category.name}</b></span>: ${category.description}`;
+        const span = `- <span style="color: ${category.color}; text-decoration: underline; text-decoration-thickness: 4px; text-decoration-skip-ink: none"><b>${category.name}</b></span>: ${category.description}`;
         errorList.push(span);
     });
     var instructions = defaultInstructions.replace(/{error_list}/g, errorList.join("\n") + "\n");