Replace indentation theme hook/indentation.html.twig with data attributes

Created on 29 April 2013, almost 12 years ago

Updated 5 April 2025, 12 days ago

Meta issue: #1980004: [meta] Creating Dream Markup →
Issue based on: #1939102: Convert theme_indentation() to Twig →

The motivation is to get rid of empty div's being used for indenting (which clearly is not good markup). Instead, the space should be applied to the table elements, originally proposed in the tr tags but after a semantical-technical discussion at Barcelona, the target was shifted to the first td of the row, containing the title / label content.

However, implementation of the data-indent attribute in the td of only draggable tables, it will be necessary to adjust the template of the whole table. Hence in this issue, there is a patch provided to reduce the redundant markup to only one div (a better-than-nothing approach), and a proposal to consider a new issue towards creating the "table-draggable" template.

Also, the patch removes theme_indentation() (which only inserted markup via PHP) in favour of equivalent Twig template.

Target markup proposal:



<table>
  <tr><td data-indent="1">1</td></tr>
  <tr><td data-indent="2">2</td></tr>
  <tr><td data-indent="3">3</td></tr>
  <tr><td data-indent="4">4</td></tr>
  <tr><td data-indent="5">5</td></tr>
  <tr><td data-indent="6">6</td></tr>
  <tr><td data-indent="7">7</td></tr>
  <tr><td data-indent="8">8</td></tr>
  <tr><td data-indent="9">9</td></tr>
</table>

<style>
  td[data-indent="1"] { padding-left: 1em; }
  td[data-indent="2"] { padding-left: 2em; }
  td[data-indent="3"] { padding-left: 3em; }
  td[data-indent="4"] { padding-left: 4em; }
  td[data-indent="5"] { padding-left: 5em; }
  td[data-indent="6"] { padding-left: 6em; }
  td[data-indent="7"] { padding-left: 7em; }
  td[data-indent="8"] { padding-left: 8em; }
  td[data-indent="9"] { padding-left: 9em; }
</style>

📌 Task

Status

Closed: outdated

Version

11.0 🔥

Component

markup

Created by

🇲🇩Moldova oresh

Live updates comments and jobs are added and updated live.