Blame for index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QR Scan Difficulty</title>
  <meta name="description" content="The same QR code scans on some phones and fails on others. Measured on the scanners in iPhones and Android phones: how many codes each misses, and why.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page">

  <header class="hero">
    <p class="kicker">QR scan difficulty · measured</p>
    <h1>Not every phone reads the same QR codes.</h1>
    <div class="versus" id="versus" aria-live="polite"></div>
  </header>

  <section class="block" aria-labelledby="introTitle">
    <h2 id="introTitle">The QR code was invented for messy factories</h2>
    <p class="section-lede">In 1994, <a href="https://www.denso.com/global/en/business/innovation/qrcode/" target="_blank" rel="noopener">Denso</a>, a Toyota-group parts maker, made the QR code for its factory floors. A barcode held about 20 characters, so workers scanned about ten for each product. “It was more like a job to read the barcode than to make the product,” <a href="https://www.denso.com/global/en/driven-base/career-life/qr-hara_2408/" target="_blank" rel="noopener">recalls Masahiro Hara</a>, who led the work. And “if the barcodes were contaminated with oil, they would become unreadable.”</p>
    <p class="section-lede">So the new code had to “hold up against oil and grime.” It repairs itself: its <a href="https://www.qrcode.com/en/about/error_correction.html" target="_blank" rel="noopener">error correction</a>, the kind used on music CDs, restores the content even when <a href="https://ethw.org/Milestones:QR_(Quick_Response)_Code,_1994" target="_blank" rel="noopener">up to 30% of the code</a> is dirty or damaged. Hara credits the factory on site: “If I had been involved in code development at an IT company, I would not have successfully created the QR Code.”</p>
    <p class="section-lede" id="introNote"></p>
    <p class="takeaway" id="introClose"></p>
  </section>

  <section class="block" aria-labelledby="whoTitle">
    <h2 id="whoTitle">More than a billion phones read fewer codes than an iPhone</h2>
    <p class="section-lede">On every iPhone, the Camera reads codes with Apple’s scanner. On Android, the Camera and <a href="https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/java/com/android/internal/config/sysui/SystemUiDeviceConfigFlags.java" target="_blank" rel="noopener">QR button</a> mostly open the maker’s own scanner, such as <a href="https://www.samsung.com/us/support/answer/ANS10001925/" target="_blank" rel="noopener">Samsung’s</a> or Huawei’s <a href="https://developer.huawei.com/consumer/en/hms/huawei-scankit/" target="_blank" rel="noopener">Scan Kit</a>; on Pixel, the QR button opens Google’s <a href="https://developers.google.com/ml-kit" target="_blank" rel="noopener">ML Kit</a>. Google’s scanner also comes with Google Play services, so apps on most Android phones can use it; WhatsApp and Instagram carry it.</p>
    <div class="grid-wrap"><table class="phones who" id="who"></table></div>
    <p class="fine" id="whoHow"></p>
    <p class="takeaway" id="whoNote"></p>
    <p class="fine" id="whoSource"></p>
  </section>

  <section class="block" aria-labelledby="androidTitle">
    <h2 id="androidTitle">The gap opens on harder codes</h2>
    <p class="section-lede">Each row is one set of codes, and each mark one scanner. The band, and the number at the right, span the Android scanners.</p>
    <div class="res" id="gridRes"></div>
    <div class="skey" id="skey"></div>
    <div class="strips" id="strips" role="list" aria-label="Share of codes each scanner read, by set"></div>
    <p class="takeaway" id="stripNote"></p>
    <p class="fine" id="gridNote"></p>
    <div class="grid-wrap" id="numbers" hidden><table class="phones" id="phones"></table></div>
  </section>

  <section class="block" aria-labelledby="spectrumTitle">
    <h2 id="spectrumTitle">Even everyday prints fail on some scanners</h2>
    <p class="section-lede" id="lede"></p>
    <div class="spectrum">
      <figure class="bell-figure">
        <div class="key bell-key" id="bellKey"></div>
        <svg class="chart" id="bell" role="img" aria-labelledby="spectrumTitle"></svg>
        <input type="range" id="cursor" class="range" min="-6" max="106" step="0.5" value="40" aria-label="Move along the difficulty scale">
        <p class="readout" id="readout" aria-live="polite"></p>
        <figcaption class="fine" id="bellNote"></figcaption>
      </figure>
      <aside class="specimen" id="specimen" aria-live="polite"></aside>
    </div>
    <p class="takeaway" id="takeaway"></p>
    <details class="more" id="lanesMore">
      <summary>See each scanner</summary>
      <div class="more-body">
        <div class="res" id="laneRes"></div>
        <div class="key lanes-key" id="lanesKey"></div>
        <svg class="chart" id="lanes" role="img" aria-label="Share of codes each scanner read, by difficulty"></svg>
        <p class="fine" id="lanesNote"></p>
      </div>
    </details>
  </section>

  <section class="block" aria-labelledby="factorsTitle">
    <h2 id="factorsTitle">What makes a code hard to read</h2>
    <p class="section-lede" id="factorsLede"></p>
    <div class="pairs" id="pairs"></div>
    <details class="more" id="factorsMore">
      <summary>Explore every factor</summary>
      <div class="more-body" id="explorer"></div>
    </details>
  </section>

  <section class="block" aria-labelledby="adviceTitle">
    <h2 id="adviceTitle">What helps a code scan on every phone</h2>
    <ol class="advice" id="advice"></ol>
  </section>

  <footer class="block footer">
    <details class="more" id="method">
      <summary>How we measured</summary>
      <div class="more-body" id="methodBody"></div>
    </details>
  </footer>

  <div class="tooltip" id="tip" hidden></div>
</main>
<script type="module" src="app.js"></script>
</body>
</html>