Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Look around your room right now. Did you know that words are hiding all around you?

Any group of written words or symbols that you can read is called **text**.

When you walk outside, **signs** use short words and bright colors to give you quick directions or warnings.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Signs Around Us</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }
    .display-area {
      width: 100%;
      max-width: 440px;
      height: 220px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .sign-view {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .sign-view.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* Stop Sign */
    .octagon {
      width: 130px;
      height: 130px;
      background: #e63946;
      color: #ffffff;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 900;
      letter-spacing: 2px;
      box-shadow: 0 8px 16px rgba(230, 57, 70, 0.25);
      border: 4px solid #ffffff;
      outline: 4px solid #e63946;
    }

    /* Exit Sign */
    .rect-green {
      width: 170px;
      height: 90px;
      background: #2a9d8f;
      color: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 2px;
      border: 4px solid #ffffff;
      box-shadow: 0 8px 16px rgba(42, 157, 143, 0.25);
    }

    /* Slow / Caution Diamond */
    .diamond {
      width: 110px;
      height: 110px;
      background: #f4a261;
      color: #1e2945;
      transform: rotate(45deg);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px solid #ffffff;
      box-shadow: 0 8px 16px rgba(244, 162, 97, 0.25);
    }
    .diamond-content {
      transform: rotate(-45deg);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 1.5px;
      text-align: center;
      line-height: 1.1;
    }

    .sign-pole {
      width: 8px;
      height: 45px;
      background: #94a3b8;
      border-radius: 0 0 4px 4px;
    }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 10px 8px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="display-area">
    
    <div class="sign-view active" id="view-0">
      <div class="octagon">STOP</div>
      <div class="sign-pole"></div>
    </div>

    
    <div class="sign-view" id="view-1">
      <div class="rect-green">EXIT ➔</div>
      <div class="sign-pole"></div>
    </div>

    
    <div class="sign-view" id="view-2">
      <div style="margin-top: 10px;">
        <div class="diamond">
          <div class="diamond-content">SLOW</div>
        </div>
      </div>
      <div class="sign-pole" style="height: 35px;"></div>
    </div>
  </div>

  <div class="controls">
    <button class="tab-btn active" id="btn-0">🛑 STOP</button>
    <button class="tab-btn" id="btn-1">🟢 EXIT</button>
    <button class="tab-btn" id="btn-2">⚠️ SLOW</button>
  </div>

  <script src="https://cdn.classace.io/vendor/classace-diagram.js"></script>
  <script>
    const total = 3;
    let current = 0;
    let timer = null;

    function setStep(idx) {
      current = idx;
      for (let i = 0; i < total; i++) {
        const view = $(`#view-${i}`);
        const btn = $(`#btn-${i}`);
        if (view) view.classList.toggle('active', i === current);
        if (btn) btn.classList.toggle('active', i === current);
      }
    }

    function startAutoCycle() {
      timer = setInterval(() => {
        setStep((current + 1) % total);
      }, 3000);
    }

    function stopAutoCycle() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    for (let i = 0; i < total; i++) {
      const btn = $(`#btn-${i}`);
      if (btn) {
        onTap(btn, () => {
          stopAutoCycle();
          setStep(i);
        });
      }
    }

    startAutoCycle();
  </script>
</body>
</html>

Signs help keep you safe and tell you where to go with just one or two words.

What if you want to read a long bedtime story with full sentences and giant pictures?

A **book** has paper pages that you turn by hand to read stories, facts, or poems.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    :root {
      --primary: #22b7ff;
      --text: #1e2945;
      --border: #e2e8f0;
      --bg: #f8fafc;
      --muted: #64748b;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: var(--text);
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 420px;
    }
    .tab-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 8px;
      border-radius: 12px;
      border: 2px solid var(--border);
      background: #ffffff;
      font-size: 15px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab-btn.active {
      border-color: var(--primary);
      color: var(--text);
      background: #f0f9ff;
      box-shadow: 0 0 0 1px var(--primary);
    }

    /* Display Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 250px;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      overflow: hidden;
    }

    .panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Visual 1: Signs */
    .signs-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }
    .sign-stop {
      width: 86px;
      height: 86px;
      background: #ef4444;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 1px;
      box-shadow: 0 6px 12px rgba(239, 68, 68, 0.25);
      border: 3px solid #ffffff;
      outline: 2px solid #ef4444;
    }
    .sign-exit {
      width: 100px;
      height: 70px;
      background: #10b981;
      border-radius: 8px;
      border: 3px solid #ffffff;
      outline: 2px solid #10b981;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 6px 12px rgba(16, 185, 129, 0.25);
    }
    .sign-exit span {
      font-size: 14px;
      font-weight: 700;
    }

    /* Visual 2: Books */
    .book-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 600px;
    }
    .book {
      position: relative;
      width: 170px;
      height: 120px;
      background: #fdfbf7;
      border-radius: 6px;
      border: 2px solid #cbd5e1;
      box-shadow: -8px 8px 16px rgba(0,0,0,0.08), 8px 8px 16px rgba(0,0,0,0.08);
      display: flex;
    }
    .book-spine {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #94a3b8;
      transform: translateX(-50%);
    }
    .page-left, .page-right {
      flex: 1;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .book-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--primary);
      text-align: center;
      margin-bottom: 2px;
    }
    .text-line {
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
    }
    .text-line.dark {
      background: #94a3b8;
    }
    .text-line.short {
      width: 60%;
    }

    /* Visual 3: Screens */
    .device-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .phone {
      width: 140px;
      height: 150px;
      background: #0f172a;
      border-radius: 20px;
      padding: 8px;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
      border: 3px solid #334155;
    }
    .screen-inner {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .chat-bubble {
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      width: fit-content;
      max-width: 85%;
    }
    .chat-received {
      background: #f1f5f9;
      color: var(--text);
      align-self: flex-start;
      border-bottom-left-radius: 2px;
    }
    .chat-sent {
      background: var(--primary);
      color: #ffffff;
      align-self: flex-end;
      border-bottom-right-radius: 2px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 420px;
      margin-top: 12px;
    }
    .btn-nav {
      background: #ffffff;
      border: 1px solid var(--border);
      color: var(--text);
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .btn-nav:active {
      background: #f1f5f9;
    }
    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    .dot.active {
      background: var(--primary);
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" data-index="0">🛑 Signs</button>
    <button class="tab-btn" data-index="1">📖 Books</button>
    <button class="tab-btn" data-index="2">📱 Screens</button>
  </div>

  
  <div class="stage">
    
    <div class="panel active" id="panel-0">
      <div class="signs-wrap">
        <div class="sign-stop">STOP</div>
        <div class="sign-exit">
          EXIT
          <span>➔</span>
        </div>
      </div>
    </div>

    
    <div class="panel" id="panel-1">
      <div class="book-wrap">
        <div class="book">
          <div class="book-spine"></div>
          <div class="page-left">
            <div class="book-title">Story</div>
            <div class="text-line dark"></div>
            <div class="text-line"></div>
            <div class="text-line short"></div>
          </div>
          <div class="page-right">
            <div class="text-line"></div>
            <div class="text-line dark"></div>
            <div class="text-line"></div>
            <div class="text-line short"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="panel" id="panel-2">
      <div class="device-wrap">
        <div class="phone">
          <div class="screen-inner">
            <div class="chat-bubble chat-received">Hello! 👋</div>
            <div class="chat-bubble chat-sent">Hi there!</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-nav" id="prevBtn">◀</button>
    <div class="dots">
      <div class="dot active" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
    </div>
    <button class="btn-nav" id="nextBtn">▶</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.panel');
    const dots = document.querySelectorAll('.dot');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let current = 0;
    const total = 3;

    function setStep(idx) {
      current = (idx + total) % total;
      
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === current));
      panels.forEach((panel, i) => panel.classList.toggle('active', i === current));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === current));
    }

    tabs.forEach((tab, i) => {
      tab.addEventListener('click', () => setStep(i));
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => setStep(i));
    });

    prevBtn.addEventListener('click', () => setStep(current - 1));
    nextBtn.addEventListener('click', () => setStep(current + 1));
  </script>
</body>
</html>

You also see printed paper text on cereal boxes, birthday cards, and posters on your classroom wall.

Where else can you read words that light up when it gets dark?

A **digital text** is any text you read on a glowing screen, like a tablet, a computer, or a phone.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<title>Digital Texts on Screens</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  body {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    color: #1e2945;
  }
  .controls {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 380px;
  }
  .tab-btn {
    flex: 1;
    padding: 10px 4px;
    border: 2px solid transparent;
    background: #ffffff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
  }
  .stage {
    width: 100%;
    max-width: 380px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  /* Device Housing */
  .device {
    background: #2d3748;
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .device.phone {
    width: 170px;
    height: 270px;
    border-radius: 28px;
    padding: 10px;
  }
  .device.tablet {
    width: 250px;
    height: 260px;
    border-radius: 20px;
    padding: 12px;
  }
  .device.computer {
    width: 310px;
    height: 220px;
    border-radius: 14px 14px 4px 4px;
    padding: 10px 10px 14px 10px;
  }
  .laptop-base {
    display: none;
    position: absolute;
    bottom: -16px;
    width: 350px;
    height: 16px;
    background: #cbd5e1;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  .device.computer .laptop-base {
    display: block;
  }
  /* Screen (Glow & Digital Content) */
  .screen {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 16px rgba(34, 183, 255, 0.4), 0 0 12px rgba(34, 183, 255, 0.25);
    display: flex;
    flex-direction: column;
  }
  .screen-header {
    background: #e0f2fe;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #0284c7;
    border-bottom: 1px solid #bae6fd;
  }
  .glow-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    background: #38bdf8;
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
  }
  .screen-body {
    flex: 1;
    padding: 10px;
    overflow-y: hidden;
    position: relative;
    background: #ffffff;
  }
  .scroll-content {
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .text-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .text-icon {
    font-size: 20px;
  }
  .text-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .line-title {
    height: 8px;
    background: #0ea5e9;
    border-radius: 4px;
    width: 65%;
  }
  .line-text {
    height: 6px;
    background: #cbd5e1;
    border-radius: 3px;
    width: 90%;
  }
  .line-text.short {
    width: 50%;
  }
  /* Interactive Screen Buttons */
  .screen-footer {
    padding: 6px 10px;
    background: #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
  }
  .scroll-btn {
    background: #22b7ff;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .scroll-btn:active {
    background: #0284c7;
  }
  .page-num {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
  }
</style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" onclick="setDevice('phone', this)">📱 Phone</button>
    <button class="tab-btn" onclick="setDevice('tablet', this)">📟 Tablet</button>
    <button class="tab-btn" onclick="setDevice('computer', this)">💻 Computer</button>
  </div>

  <div class="stage">
    <div id="deviceBox" class="device phone">
      <div class="screen">
        <div class="screen-header">
          <span>Digital Text</span>
          <span class="glow-badge">✦ Screen</span>
        </div>
        
        <div class="screen-body">
          <div id="scrollContent" class="scroll-content">
            <div class="text-card">
              <span class="text-icon">📖</span>
              <div class="text-lines">
                <div class="line-title"></div>
                <div class="line-text"></div>
              </div>
            </div>
            
            <div class="text-card">
              <span class="text-icon">☀️</span>
              <div class="text-lines">
                <div class="line-title" style="width:50%"></div>
                <div class="line-text"></div>
                <div class="line-text short"></div>
              </div>
            </div>

            <div class="text-card">
              <span class="text-icon">🚀</span>
              <div class="text-lines">
                <div class="line-title" style="width:75%"></div>
                <div class="line-text"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="screen-footer">
          <button class="scroll-btn" onclick="toggleScroll()">
            <span id="scrollIcon">↕</span> <span id="scrollLabel">Scroll</span>
          </button>
          <span id="pageText" class="page-num">Page 1/2</span>
        </div>
      </div>
      <div class="laptop-base"></div>
    </div>
  </div>

  <script>
    let isScrolled = false;

    function setDevice(type, btn) {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const dev = document.getElementById('deviceBox');
      dev.className = 'device ' + type;
    }

    function toggleScroll() {
      isScrolled = !isScrolled;
      const content = document.getElementById('scrollContent');
      const pageText = document.getElementById('pageText');
      
      if (isScrolled) {
        content.style.transform = 'translateY(-64px)';
        pageText.textContent = 'Page 2/2';
      } else {
        content.style.transform = 'translateY(0px)';
        pageText.textContent = 'Page 1/2';
      }
    }
  </script>
</body>
</html>

On a screen, you can scroll up and down or tap buttons to turn pages.

Take a look around your room right now and see if you can spot one sign, one book, and one screen!

Texts Are Everywhere: Signs, Books and Screens. Recognise that texts come in many forms such as signs, books and digital texts.

Environmental Print: Using Signs, Labels, and Words Around Us

Exploring and Creating Texts (Books, Signs, and Digital/ICT Texts)

Understanding Different Types of Texts and Signs in the World

For Foundation learners, teach this concept using a concrete 'Text Safari' or 'Environmental Print Walk' around the classroom and school yard. Have students carry magnifying glasses or clipboards to spot and categorise texts into three physical baskets/buckets labeled 'Books', 'Signs/Labels', and 'Screens'. Emphasise oral language discussions connecting the visual symbol or printed word to its real-world function and meaning.

Texts Are Everywhere: Signs, Books and Screens

Signs Outside

Paper Books

Screens and Digital Texts