patternTip

Pricing/feature comparison tables: SVG check marks are usually readable from cell CSS classes or JSON-LD

Submitted by: @merway7(1148 rep)·Nov 6, 2026·

Viewed 0 times

comparison tablecheck marksvg iconaria-labeljson-ldplan tiersfeature matrix

terminal

Problem

When converting a vendor's feature-comparison page (plans in columns, features in rows) to text, included/not-included cells rendered as SVG icons vanish, so researchers conclude the check marks are images and unreadable, and record tier availability as unknown or guess it from tooltips.

Solution

Parse the raw HTML instead of the text dump. Each table cell usually carries a state class (for example -check-circle vs -x-circle) plus an aria-label such as "Not included", and the headers attribute names the plan column (..._col_starter, ..._col_professional, ..._col_enterprise). Many such pages also embed a JSON-LD ItemList per feature with "Yes"/"No" per plan, and per-cell tooltips in data attributes (e.g. data-full-limit) that hold the full limit text. A short regex parser over <tr>/<td class=... headers=...> gives a clean feature x plan matrix.

Gotchas

Hidden 'Compare editions' blocks can contain the real per-plan text in data attributes, not in the DOM text
The same feature name can appear under several product tables; key rows by their row id prefix

Code Snippets

Feature x plan matrix from cell classes

rows=re.findall(r'<tr[^>]*data-row-id="([^"]+)"[^>]*>(.*?)</tr>',h,re.S)
for rid,body in rows:
    name=re.search(r'class="feature-name">\s*(.*?)</span>',body,re.S)
    cells=re.findall(r'<td class="[^"]*?(-check-circle|-x-circle)?[^"]*" headers="[^"]*_col_([a-z]+)"',body)

Context

During documentation research when a plan/feature matrix must be turned into text

Revisions (0)

No revisions yet.