From 5b9d21536d308e1eb0a329ce8b7e6d6136ed03e6 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:14:26 +0200
Subject: [PATCH 01/12] feat(html): write the renderer's css and js beside the
 html again
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dropping odr.js made the css and js string constants written into every
document, which is what a self-contained view wants but not what a corpus of
them wants: the ~20 KB frontend is repeated in each file, and a one-character
stylesheet change rewrites all of them.

`HtmlConfig::embed_shipped_resources`, `resource_path`,
`relative_resource_paths` and `HtmlResource::is_shipped` were left accepted and
inert by that change. They mean again what they used to, except for what made
them painful: nothing has to be installed next to the library, because the
bytes are still the compiled-in constants. Each asset is registered as a
shipped `HtmlResource` over a `MemoryFile`, so the existing locator decides
between `<style>`/`<script>` and `<link>`/`<src>`, and `bring_offline` writes
the file out — the same path images have always taken.

`GlobalParams::odr_core_data_path` stays inert and stays on the list to remove;
it is about finding a data directory, which is the part that is gone for good.
`HtmlConfig` no longer seeds `resource_path` from it, so reviving the option
cannot silently aim output at it.

The reference-output suite links them from one `resources/` directory per test
repository, the layout it already had in the odr.js era, so that a change to
the frontend moves those files rather than every document under them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 docs/design/README.md                | 14 +++--
 src/odr/html.cpp                     | 24 ++++++--
 src/odr/html.hpp                     | 14 +++--
 src/odr/internal/html/document.cpp   |  6 +-
 src/odr/internal/html/frontend.cpp   | 90 ++++++++++++++++++++++------
 src/odr/internal/html/frontend.hpp   | 17 +++---
 src/odr/internal/html/media_file.cpp |  3 +-
 src/odr/internal/html/text_file.cpp  |  5 +-
 test/src/html_output_test.cpp        |  9 +++
 9 files changed, 134 insertions(+), 48 deletions(-)

diff --git a/docs/design/README.md b/docs/design/README.md
index 9f7fe891a..bf0adb5a3 100644
--- a/docs/design/README.md
+++ b/docs/design/README.md
@@ -96,12 +96,14 @@
 ### Open tasks
 
 - drop the last inert traces of the shipped css/js once consumers have moved
-  off them: `GlobalParams::odr_core_data_path`, `HtmlConfig::resource_path`,
-  `embed_shipped_resources`, `relative_resource_paths`,
-  `HtmlResource::is_shipped` and their java, python and objc mirrors, plus
-  `OdrAndroid.init`, `ODRGlobalParams.bootstrapFromFrameworkBundle` and the
-  `ODR_BUNDLE_ASSETS` / conan `bundle_assets` option, all still accepted and
-  all doing nothing.
+  off them: `GlobalParams::odr_core_data_path` and its java, python and objc
+  mirrors, plus `OdrAndroid.init`,
+  `ODRGlobalParams.bootstrapFromFrameworkBundle` and the `ODR_BUNDLE_ASSETS` /
+  conan `bundle_assets` option, all still accepted and all doing nothing. They
+  are about *finding* a data directory, which nothing does any more — unlike
+  `HtmlConfig::embed_shipped_resources`, `resource_path`,
+  `relative_resource_paths` and `HtmlResource::is_shipped`, which decide where
+  the compiled-in css and js land and are live again.
 - drop the last inert traces of libmagic once consumers have moved off them:
   `GlobalParams::libmagic_database_path` and its java, python and objc mirrors
   still store and return a path nothing reads, and `ODR_WITH_LIBMAGIC` /
diff --git a/src/odr/html.cpp b/src/odr/html.cpp
index 49f5c15d8..2eb2a1072 100644
--- a/src/odr/html.cpp
+++ b/src/odr/html.cpp
@@ -5,7 +5,6 @@
 #include <odr/document_path.hpp>
 #include <odr/exceptions.hpp>
 #include <odr/filesystem.hpp>
-#include <odr/global_params.hpp>
 
 #include <odr/internal/abstract/html_service.hpp>
 #include <odr/internal/common/path.hpp>
@@ -57,7 +56,6 @@ HtmlConfig::HtmlConfig(std::string output_path_)
 }
 
 void HtmlConfig::init() {
-  resource_path = GlobalParams::odr_core_data_path();
   resource_locator = html::standard_resource_locator();
 }
 
@@ -248,12 +246,28 @@ HtmlService html::translate(const DecodedFile &file, const HtmlConfig &config,
 HtmlResourceLocator html::standard_resource_locator() {
   return [](const HtmlResource &resource,
             const HtmlConfig &config) -> HtmlResourceLocation {
-    // only an accessible image can be embedded; everything else is linked
-    if (resource.is_accessible() && config.embed_images &&
-        resource.type() == HtmlResourceType::image) {
+    // what we cannot read can only be linked
+    if (!resource.is_accessible()) {
+      return resource.path();
+    }
+
+    if ((config.embed_shipped_resources && resource.is_shipped()) ||
+        (config.embed_images && resource.type() == HtmlResourceType::image)) {
       return std::nullopt;
     }
 
+    if (resource.is_shipped()) {
+      Path path = Path(config.resource_path).join(RelPath(resource.path()));
+      // `rebase` throws across absolute and relative; a relative one is already
+      // relative to the document.
+      if (const Path output(config.output_path.value_or(""));
+          config.relative_resource_paths && config.output_path.has_value() &&
+          path.absolute() == output.absolute()) {
+        path = path.rebase(output);
+      }
+      return path.string();
+    }
+
     return resource.path();
   };
 }
diff --git a/src/odr/html.hpp b/src/odr/html.hpp
index 412b419a8..4598a147d 100644
--- a/src/odr/html.hpp
+++ b/src/odr/html.hpp
@@ -46,8 +46,8 @@ class HtmlResource final {
   [[nodiscard]] const std::string &name() const;
   [[nodiscard]] const std::string &path() const;
   [[nodiscard]] const std::optional<File> &file() const;
-  /// @deprecated Inert: always false. The css and js are written into the
-  /// document, so no resource is shipped alongside it any more.
+  /// One of the renderer's own compiled-in css/js rather than something the
+  /// document carries. See @ref HtmlConfig::embed_shipped_resources.
   [[nodiscard]] bool is_shipped() const;
   [[nodiscard]] bool is_external() const;
   [[nodiscard]] bool is_accessible() const;
@@ -104,14 +104,16 @@ struct HtmlConfig {
 
   // embedding
   bool embed_images{true};
-  /// @deprecated Inert: nothing is shipped any more, the css and js are
-  /// written into the document.
+  /// Write the renderer's own css and js into every document rather than beside
+  /// it as one shared file the documents link.
   bool embed_shipped_resources{true};
 
   // resources
-  /// @deprecated See @ref embed_shipped_resources.
+  /// Where linked shipped resources go, relative to the output path unless
+  /// named absolutely. Empty puts them beside the document.
   std::string resource_path;
-  /// @deprecated See @ref embed_shipped_resources.
+  /// Link an absolute @ref resource_path relative to the document, so the
+  /// output stays movable.
   bool relative_resource_paths{true};
 
   // create editable output
diff --git a/src/odr/internal/html/document.cpp b/src/odr/internal/html/document.cpp
index 73ef2659e..bff94abdc 100644
--- a/src/odr/internal/html/document.cpp
+++ b/src/odr/internal/html/document.cpp
@@ -47,9 +47,9 @@ void front(const Document &document, const WritingState &state) {
                           ? state.config().spreadsheet_viewport_mode
                           : std::nullopt);
 
-  write_document_style(out);
+  write_document_style(state);
   if (document.document_type() == DocumentType::spreadsheet) {
-    write_spreadsheet_style(out);
+    write_spreadsheet_style(state);
   }
 
   out.write_header_end();
@@ -87,7 +87,7 @@ void back(const Document &document, const WritingState &state) {
     out.write_element_end("div");
   }
 
-  write_document_script(out);
+  write_document_script(state);
 
   out.write_body_end();
   out.write_end();
diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index d574ff9d7..e0d36a115 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -1,5 +1,10 @@
 #include <odr/internal/html/frontend.hpp>
 
+#include <odr/file.hpp>
+#include <odr/html.hpp>
+
+#include <odr/internal/html/common.hpp>
+#include <odr/internal/html/html_service.hpp>
 #include <odr/internal/html/html_writer.hpp>
 
 namespace odr::internal::html {
@@ -562,16 +567,61 @@ constexpr const char *text_js = R"js(
 })();
 )js";
 
-void write_style(HtmlWriter &out, const char *css) {
-  out.write_header_style_begin();
-  out.out() << css;
-  out.write_header_style_end();
+/// One of the renderer's own stylesheets or scripts — "shipped" in the sense
+/// @ref odr::HtmlConfig::embed_shipped_resources means.
+struct Asset {
+  HtmlResourceType type;
+  const char *mime_type;
+  const char *name;
+  const char *content;
+};
+
+constexpr Asset document_css_asset{HtmlResourceType::css, "text/css",
+                                   "document.css", document_css};
+constexpr Asset spreadsheet_css_asset{HtmlResourceType::css, "text/css",
+                                      "spreadsheet.css", spreadsheet_css};
+constexpr Asset text_css_asset{HtmlResourceType::css, "text/css", "text.css",
+                               text_css};
+constexpr Asset media_css_asset{HtmlResourceType::css, "text/css", "media.css",
+                                media_css};
+constexpr Asset document_js_asset{HtmlResourceType::js, "text/javascript",
+                                  "document.js", document_js};
+constexpr Asset text_js_asset{HtmlResourceType::js, "text/javascript",
+                              "text.js", text_js};
+
+/// Registers @p asset among the view's resources; `nullopt` to embed it.
+HtmlResourceLocation locate(const Asset &asset, const WritingState &state) {
+  const odr::HtmlResource resource = HtmlResource::create(
+      asset.type, asset.mime_type, asset.name, asset.name,
+      odr::File::from_memory(asset.content), true, false, true);
+  HtmlResourceLocation location =
+      state.config().resource_locator(resource, state.config());
+  state.resources().emplace_back(resource, location);
+  return location;
+}
+
+void write_style(const Asset &asset, const WritingState &state) {
+  if (const HtmlResourceLocation location = locate(asset, state);
+      location.has_value()) {
+    state.out().write_header_style(escape_attribute(*location));
+    return;
+  }
+
+  state.out().write_header_style_begin();
+  state.out().out() << asset.content;
+  state.out().write_header_style_end();
 }
 
-void write_script(HtmlWriter &out, const char *js) {
-  out.write_script_begin();
-  out.out() << js;
-  out.write_script_end();
+void write_script(const Asset &asset, const WritingState &state) {
+  if (const HtmlResourceLocation location = locate(asset, state);
+      location.has_value()) {
+    state.out().write_script(escape_attribute(*location));
+    return;
+  }
+
+  state.out().write_script_begin();
+  state.out().out() << asset.content;
+  state.out().write_script_end();
 }
 
 } // namespace
@@ -580,22 +630,28 @@ void write_script(HtmlWriter &out, const char *js) {
 
 namespace odr::internal {
 
-void html::write_document_style(HtmlWriter &out) {
-  write_style(out, document_css);
+void html::write_document_style(const WritingState &state) {
+  write_style(document_css_asset, state);
 }
 
-void html::write_spreadsheet_style(HtmlWriter &out) {
-  write_style(out, spreadsheet_css);
+void html::write_spreadsheet_style(const WritingState &state) {
+  write_style(spreadsheet_css_asset, state);
 }
 
-void html::write_text_style(HtmlWriter &out) { write_style(out, text_css); }
+void html::write_text_style(const WritingState &state) {
+  write_style(text_css_asset, state);
+}
 
-void html::write_media_style(HtmlWriter &out) { write_style(out, media_css); }
+void html::write_media_style(const WritingState &state) {
+  write_style(media_css_asset, state);
+}
 
-void html::write_document_script(HtmlWriter &out) {
-  write_script(out, document_js);
+void html::write_document_script(const WritingState &state) {
+  write_script(document_js_asset, state);
 }
 
-void html::write_text_script(HtmlWriter &out) { write_script(out, text_js); }
+void html::write_text_script(const WritingState &state) {
+  write_script(text_js_asset, state);
+}
 
 } // namespace odr::internal
diff --git a/src/odr/internal/html/frontend.hpp b/src/odr/internal/html/frontend.hpp
index f6a17fa9f..7241ab3b0 100644
--- a/src/odr/internal/html/frontend.hpp
+++ b/src/odr/internal/html/frontend.hpp
@@ -2,19 +2,20 @@
 
 namespace odr::internal::html {
 
-class HtmlWriter;
+struct WritingState;
 
-/// Each of these writes one complete `<style>`/`<script>` element.
+/// Each of these writes one complete `<style>`/`<script>` element, or links it
+/// as a shipped @ref odr::HtmlResource when the config asks for that.
 
-void write_document_style(HtmlWriter &out);
+void write_document_style(const WritingState &state);
 /// Written in addition to the document style.
-void write_spreadsheet_style(HtmlWriter &out);
-void write_text_style(HtmlWriter &out);
-void write_media_style(HtmlWriter &out);
+void write_spreadsheet_style(const WritingState &state);
+void write_text_style(const WritingState &state);
+void write_media_style(const WritingState &state);
 
 /// The `odr` object a document view exposes to its host: `generateDiff()`,
 /// `search()`, `searchNext()`, `searchPrevious()`, `resetSearch()`.
-void write_document_script(HtmlWriter &out);
-void write_text_script(HtmlWriter &out);
+void write_document_script(const WritingState &state);
+void write_text_script(const WritingState &state);
 
 } // namespace odr::internal::html
diff --git a/src/odr/internal/html/media_file.cpp b/src/odr/internal/html/media_file.cpp
index b4d6efad7..34d93516d 100644
--- a/src/odr/internal/html/media_file.cpp
+++ b/src/odr/internal/html/media_file.cpp
@@ -142,6 +142,7 @@ class HtmlServiceImpl final : public HtmlService {
 
   HtmlResources write_media(HtmlWriter &out) const {
     HtmlResources resources;
+    const WritingState state(out, config(), resources);
 
     // The media stays a resource rather than a data URI: a video is regularly
     // larger than everything else we emit put together, and base64 in the
@@ -159,7 +160,7 @@ class HtmlServiceImpl final : public HtmlService {
     out.write_header_target("_blank");
     out.write_header_title("odr");
     write_viewport_meta(out, config(), false);
-    write_media_style(out);
+    write_media_style(state);
     out.write_header_end();
 
     out.write_body_begin(HtmlElementOptions().set_class("odr-media"));
diff --git a/src/odr/internal/html/text_file.cpp b/src/odr/internal/html/text_file.cpp
index 9b43ea4bc..05e054d8c 100644
--- a/src/odr/internal/html/text_file.cpp
+++ b/src/odr/internal/html/text_file.cpp
@@ -77,6 +77,7 @@ class HtmlServiceImpl final : public HtmlService {
 
   HtmlResources write_text(HtmlWriter &out) const {
     HtmlResources resources;
+    const WritingState state(out, config(), resources);
 
     const auto [text, charset] = body_and_charset();
 
@@ -89,7 +90,7 @@ class HtmlServiceImpl final : public HtmlService {
     out.write_header_title("odr");
     write_viewport_meta(out, config(), false);
 
-    write_text_style(out);
+    write_text_style(state);
 
     out.write_header_end();
 
@@ -137,7 +138,7 @@ class HtmlServiceImpl final : public HtmlService {
 
     out.write_element_end("div");
 
-    write_text_script(out);
+    write_text_script(state);
 
     out.write_body_end();
 
diff --git a/test/src/html_output_test.cpp b/test/src/html_output_test.cpp
index 0411ef2fc..55cdca3a9 100644
--- a/test/src/html_output_test.cpp
+++ b/test/src/html_output_test.cpp
@@ -56,6 +56,7 @@ struct TestParams {
   PdfTextMode pdf_text_mode{PdfTextMode::dual_layer};
   std::string test_repo;
   std::string output_path;
+  std::string output_path_prefix;
 };
 
 using HtmlOutputTests = testing::TestWithParam<TestParams>;
@@ -66,6 +67,7 @@ TEST_P(HtmlOutputTests, html_meta) {
   const TestParams &params = GetParam();
   const TestFile &test_file = params.test_file;
   const std::string &output_path = params.output_path;
+  const std::string &output_path_prefix = params.output_path_prefix;
 
   const FileCategory file_category = file_category_by_file_type(test_file.type);
 
@@ -159,6 +161,12 @@ TEST_P(HtmlOutputTests, html_meta) {
 
   HtmlConfig config(output_path);
   config.embed_images = true;
+  // Linked once per test repository, so a stylesheet change moves those files
+  // rather than every document.
+  config.embed_shipped_resources = false;
+  config.resource_path =
+      Path(output_path_prefix).parent().join(RelPath("resources")).string();
+  config.relative_resource_paths = true;
   config.editable = true;
   config.spreadsheet_limit = TableDimensions(4000, 500);
   config.page_range_end = 100;
@@ -222,6 +230,7 @@ TestParams create_test_params(const TestFile &test_file,
       .pdf_text_mode = pdf_text_mode,
       .test_repo = test_repo,
       .output_path = output_path,
+      .output_path_prefix = output_path_prefix,
   };
 }
 

From dc00ee66896ec1f259e309360a36b79f0db24aa8 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:16:19 +0200
Subject: [PATCH 02/12] feat(html): name the parts of a sheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The column letters and row numbers were plain `<td>`s carrying their alignment
as an inline style repeated on every row, so nothing in css or js could tell
the grid's ruler from its contents, and the sheet table itself was addressable
only as `table`.

They are `<th>`s in a `<thead>`/`<tbody>` now, under `.odr-sheet` with
`-corner`, `-column-header`, `-row-header` and a `-gutter` `<col>`, and the
constant styling moves into the stylesheet — which makes the output smaller,
since what was repeated per row is now written once. Only the row's own height
stays inline, being the one part that varies.

The letters and numbers get no `scope`: they label positions rather than the
contents of what they head, and a screen reader announcing "A" ahead of every
cell in a column would be noise.

Appearance is unchanged; this is the handle the styling and the scripts need.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/document_element.cpp | 56 +++++++++++++---------
 src/odr/internal/html/frontend.cpp         |  9 ++--
 2 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/odr/internal/html/document_element.cpp b/src/odr/internal/html/document_element.cpp
index 1630a9b9b..f5439a8e3 100644
--- a/src/odr/internal/html/document_element.cpp
+++ b/src/odr/internal/html/document_element.cpp
@@ -79,10 +79,8 @@ void html::translate_element(const Element &element,
 }
 
 void html::translate_sheet(const Sheet &sheet, const WritingState &state) {
-  state.out().write_element_begin(
-      "table",
-      HtmlElementOptions().set_attributes(HtmlAttributesVector{
-          {"cellpadding", "0"}, {"border", "0"}, {"cellspacing", "0"}}));
+  state.out().write_element_begin("table",
+                                  HtmlElementOptions().set_class("odr-sheet"));
 
   const TableDimensions dimensions = sheet.dimensions();
   std::uint32_t end_column = dimensions.columns;
@@ -101,8 +99,10 @@ void html::translate_sheet(const Sheet &sheet, const WritingState &state) {
   end_column = std::max(1u, end_column);
   end_row = std::max(1u, end_row);
 
-  state.out().write_element_begin(
-      "col", HtmlElementOptions().set_close_type(HtmlCloseType::none));
+  state.out().write_element_begin("col",
+                                  HtmlElementOptions()
+                                      .set_close_type(HtmlCloseType::none)
+                                      .set_class("odr-sheet-gutter"));
 
   for (std::uint32_t column_index = 0; column_index < end_column;
        ++column_index) {
@@ -116,26 +116,32 @@ void html::translate_sheet(const Sheet &sheet, const WritingState &state) {
             .set_style(translate_table_column_style(table_column_style)));
   }
 
+  // No `scope`: the letters and numbers are a ruler, not headers of what they
+  // label.
   {
+    state.out().write_element_begin("thead");
     state.out().write_element_begin("tr");
 
-    state.out().write_element_begin("td",
-                                    HtmlElementOptions()
-                                        .set_close_type(HtmlCloseType::trailing)
-                                        .set_style("width:30px;height:20px;"));
+    state.out().write_element_begin(
+        "th",
+        HtmlElementOptions().set_inline(true).set_class("odr-sheet-corner"));
+    state.out().write_element_end("th");
 
     for (std::uint32_t column_index = 0; column_index < end_column;
          ++column_index) {
       state.out().write_element_begin(
-          "td", HtmlElementOptions().set_inline(true).set_style(
-                    "text-align:center;vertical-align:middle;"));
+          "th", HtmlElementOptions().set_inline(true).set_class(
+                    "odr-sheet-column-header"));
       state.out().write_raw(TablePosition::to_column_string(column_index));
-      state.out().write_element_end("td");
+      state.out().write_element_end("th");
     }
 
     state.out().write_element_end("tr");
+    state.out().write_element_end("thead");
   }
 
+  state.out().write_element_begin("tbody");
+
   TableCursor cursor;
   for (std::uint32_t row_index = cursor.row(); row_index < end_row;
        row_index = cursor.row()) {
@@ -146,17 +152,20 @@ void html::translate_sheet(const Sheet &sheet, const WritingState &state) {
                   translate_table_row_style(table_row_style)));
 
     state.out().write_element_begin(
-        "td", HtmlElementOptions().set_inline(true).set_style([&] {
-          std::string style = "text-align:center;vertical-align:middle;";
-          if (const std::optional<Measure> height = table_row_style.height;
-              height.has_value()) {
-            style += "height:" + height->to_string() + ";";
-            style += "max-height:" + height->to_string() + ";";
-          }
-          return style;
-        }()));
+        "th", HtmlElementOptions()
+                  .set_inline(true)
+                  .set_class("odr-sheet-row-header")
+                  .set_style([&]() -> std::optional<HtmlWritable> {
+                    const std::optional<Measure> height =
+                        table_row_style.height;
+                    if (!height.has_value()) {
+                      return std::nullopt;
+                    }
+                    return "height:" + height->to_string() +
+                           ";max-height:" + height->to_string() + ";";
+                  }()));
     state.out().write_raw(TablePosition::to_row_string(row_index));
-    state.out().write_element_end("td");
+    state.out().write_element_end("th");
 
     for (std::uint32_t column_index = cursor.column();
          column_index < end_column; column_index = cursor.column()) {
@@ -211,6 +220,7 @@ void html::translate_sheet(const Sheet &sheet, const WritingState &state) {
     cursor.add_row();
   }
 
+  state.out().write_element_end("tbody");
   state.out().write_element_end("table");
 }
 
diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index e0d36a115..a62905d5c 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -32,9 +32,12 @@ table{border-collapse:collapse;table-layout:fixed}
 td{vertical-align:bottom;text-overflow:ellipsis;height:inherit}
 x-p{font-family:"Arial",serif;font-size:10pt}
 td x-p{height:inherit}
-.odr-gridlines-soft table td{border-top:1px solid #c0c0c0;border-left:1px solid #c0c0c0}
-.odr-gridlines-hard table td{border:1px solid #c0c0c0!important}
-table td.odr-value-type-float{text-align:right}
+.odr-sheet th{font-weight:normal;text-align:center;vertical-align:middle}
+.odr-sheet-gutter{width:30px}
+.odr-sheet-corner{height:20px}
+.odr-gridlines-soft .odr-sheet td,.odr-gridlines-soft .odr-sheet th{border-top:1px solid #c0c0c0;border-left:1px solid #c0c0c0}
+.odr-gridlines-hard .odr-sheet td,.odr-gridlines-hard .odr-sheet th{border:1px solid #c0c0c0!important}
+.odr-sheet td.odr-value-type-float{text-align:right}
 )css";
 
 constexpr const char *text_css = R"css(

From 3e6cb82862b818e6664a96259ddf86f06961701e Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:21:15 +0200
Subject: [PATCH 03/12] feat(html): a quieter grid to read a sheet in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sheet was the browser's default table: hairline #c0c0c0 rules of the same
weight everywhere, Arial 10pt, text set flush against the gridline, and a ruler
that scrolled away with the content it labelled.

The ruler now sticks to the edges it labels, so the column letters and row
numbers stay put however far down or across a sheet goes — the one change that
makes a large sheet navigable at all. Sticky cells in a collapsed border model
do not repaint their borders in Chrome or WebKit, so it draws its own
separators with inset shadows and leaves `border` to the grid.

The rest is restraint: lighter gridlines, a firmer rule where the ruler meets
the grid, the ruler set smaller and greyer than the data so the eye skips it,
a system font stack, and 6px of horizontal padding so text no longer touches
the line beside it. Vertical padding stays at a hair, because a row's height is
the document's to state and cell padding would fight it.

The gutter is sized from the longest row number rather than the flat 30px that
truncated anything past four digits. Under `table-layout:fixed` the first row
sizes the columns, so the width goes on the corner cell, where `ch` resolves
against the ruler's own font.

A workbook opens as one file per sheet, so a view titled `odr` left every
browser tab of it identical; a sheet view is titled with its sheet's name.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/document.cpp         | 14 ++++++++----
 src/odr/internal/html/document_element.cpp | 11 ++++++++-
 src/odr/internal/html/frontend.cpp         | 26 ++++++++++++++++------
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/odr/internal/html/document.cpp b/src/odr/internal/html/document.cpp
index bff94abdc..c0470aa45 100644
--- a/src/odr/internal/html/document.cpp
+++ b/src/odr/internal/html/document.cpp
@@ -32,7 +32,10 @@ bool is_paged_content(const Document &document, const HtmlConfig &config) {
          document.document_type() == DocumentType::drawing;
 }
 
-void front(const Document &document, const WritingState &state) {
+/// @p name titles the view; empty when the whole document is written as one
+/// file, which no one view names.
+void front(const Document &document, const WritingState &state,
+           const std::string &name) {
   HtmlWriter &out = state.out();
 
   const bool paged_content = is_paged_content(document, state.config());
@@ -41,7 +44,10 @@ void front(const Document &document, const WritingState &state) {
   out.write_header_begin();
   out.write_header_charset("UTF-8");
   out.write_header_target("_blank");
-  out.write_header_title("odr");
+  out.write_header_title(
+      document.document_type() == DocumentType::spreadsheet && !name.empty()
+          ? escape_text(name)
+          : "odr");
   write_viewport_meta(out, state.config(), paged_content,
                       document.document_type() == DocumentType::spreadsheet
                           ? state.config().spreadsheet_viewport_mode
@@ -109,7 +115,7 @@ class HtmlFragmentBase {
   virtual void write_fragment(HtmlWriter &out, WritingState &state) const = 0;
 
   void write_document(HtmlWriter &out, WritingState &state) const {
-    front(m_document, state);
+    front(m_document, state, m_name);
     write_fragment(out, state);
     back(m_document, state);
   }
@@ -266,7 +272,7 @@ class HtmlServiceImpl final : public HtmlService {
 
     WritingState state(out, config(), resources);
 
-    front(m_document, state);
+    front(m_document, state, "");
     for (const auto &fragment : m_fragments) {
       fragment->write_fragment(out, state);
     }
diff --git a/src/odr/internal/html/document_element.cpp b/src/odr/internal/html/document_element.cpp
index f5439a8e3..5a041cbc6 100644
--- a/src/odr/internal/html/document_element.cpp
+++ b/src/odr/internal/html/document_element.cpp
@@ -122,9 +122,18 @@ void html::translate_sheet(const Sheet &sheet, const WritingState &state) {
     state.out().write_element_begin("thead");
     state.out().write_element_begin("tr");
 
+    // Under `table-layout:fixed` the first row sizes the columns, and `ch`
+    // resolves against the ruler's font — so the gutter width sits here rather
+    // than on the `<col>`.
     state.out().write_element_begin(
         "th",
-        HtmlElementOptions().set_inline(true).set_class("odr-sheet-corner"));
+        HtmlElementOptions()
+            .set_inline(true)
+            .set_class("odr-sheet-corner")
+            .set_style("width:calc(" +
+                       std::to_string(
+                           TablePosition::to_row_string(end_row - 1).size()) +
+                       "ch + 14px);"));
     state.out().write_element_end("th");
 
     for (std::uint32_t column_index = 0; column_index < end_column;
diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index a62905d5c..2b1408a9d 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -27,16 +27,28 @@ mark{background:#ff0}
 mark.current{background:orange}
 )css";
 
+/// No `text-overflow`: it sat on `td`, whose overflow is visible, and making it
+/// work would mean clipping.
 constexpr const char *spreadsheet_css = R"css(
+:root{
+--odr-sheet-line:#e3e5e8;
+--odr-sheet-rule:#c8ccd1;
+--odr-sheet-ruler:#f5f6f7;
+--odr-sheet-ruler-text:#5c6169;
+--odr-sheet-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+}
 table{border-collapse:collapse;table-layout:fixed}
-td{vertical-align:bottom;text-overflow:ellipsis;height:inherit}
-x-p{font-family:"Arial",serif;font-size:10pt}
+td{vertical-align:bottom;height:inherit;padding:1px 6px}
+x-p{font-family:var(--odr-sheet-font);font-size:10pt}
 td x-p{height:inherit}
-.odr-sheet th{font-weight:normal;text-align:center;vertical-align:middle}
-.odr-sheet-gutter{width:30px}
-.odr-sheet-corner{height:20px}
-.odr-gridlines-soft .odr-sheet td,.odr-gridlines-soft .odr-sheet th{border-top:1px solid #c0c0c0;border-left:1px solid #c0c0c0}
-.odr-gridlines-hard .odr-sheet td,.odr-gridlines-hard .odr-sheet th{border:1px solid #c0c0c0!important}
+/* Sticky cells in a collapsed border model do not repaint their borders in
+   Chrome or WebKit, so the ruler uses inset shadows. */
+.odr-sheet th{position:sticky;background:var(--odr-sheet-ruler);color:var(--odr-sheet-ruler-text);font:500 11px/1.6 var(--odr-sheet-font);text-align:center;vertical-align:middle;padding:0 4px;white-space:nowrap;user-select:none}
+.odr-sheet thead th{top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--odr-sheet-rule),inset -1px 0 0 var(--odr-sheet-line)}
+.odr-sheet-row-header{left:0;z-index:1;box-shadow:inset -1px 0 0 var(--odr-sheet-rule),inset 0 -1px 0 var(--odr-sheet-line)}
+.odr-sheet-corner{left:0;z-index:3;box-shadow:inset -1px 0 0 var(--odr-sheet-rule),inset 0 -1px 0 var(--odr-sheet-rule)}
+.odr-gridlines-soft .odr-sheet td{border-top:1px solid var(--odr-sheet-line);border-left:1px solid var(--odr-sheet-line)}
+.odr-gridlines-hard .odr-sheet td{border:1px solid var(--odr-sheet-line)!important}
 .odr-sheet td.odr-value-type-float{text-align:right}
 )css";
 

From fd4bbeb30de9a48ce5b5e8085c0cf98948f1a6af Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:23:18 +0200
Subject: [PATCH 04/12] fix(ooxml): name a worksheet from the workbook that
 lists it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`sheet_name` read a `name` attribute off the worksheet part's root element,
which has none — the name is on the `<sheet>` entry in `workbook.xml` that
points at the part. Every xlsx sheet was therefore nameless: `Sheet::name()`
returned "", the html views were named "" and the sheet titles came out blank.

The registry's `Sheet` carries the name now, set from that entry while the
workbook's children are parsed. `.ods` and `.xls` already did this correctly.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 .../spreadsheet/ooxml_spreadsheet_document.cpp  |  2 +-
 .../ooxml_spreadsheet_element_registry.hpp      |  4 ++++
 .../spreadsheet/ooxml_spreadsheet_parser.cpp    |  2 ++
 test/src/document_test.cpp                      | 17 +++++++++++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_document.cpp b/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_document.cpp
index 229a6aaaa..d51ed26a9 100644
--- a/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_document.cpp
+++ b/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_document.cpp
@@ -197,7 +197,7 @@ class ElementAdapter final : public abstract::ElementAdapter,
 
   [[nodiscard]] std::string
   sheet_name(const ElementIdentifier element_id) const override {
-    return get_node(element_id).attribute("name").value();
+    return m_registry->sheet_element_at(element_id).name;
   }
   [[nodiscard]] TableDimensions
   sheet_dimensions(const ElementIdentifier element_id) const override {
diff --git a/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_element_registry.hpp b/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_element_registry.hpp
index dbcb67c5a..4ef63f107 100644
--- a/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_element_registry.hpp
+++ b/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_element_registry.hpp
@@ -10,6 +10,7 @@
 #include <odr/table_position.hpp>
 
 #include <map>
+#include <string>
 #include <unordered_map>
 #include <vector>
 
@@ -52,6 +53,9 @@ class ElementRegistry final {
       ElementIdentifier element_id{null_element_id};
     };
 
+    /// From the workbook's `<sheet name=…>`; the worksheet part carries none.
+    std::string name;
+
     TableDimensions dimensions;
 
     std::map<std::uint32_t, Column> columns;
diff --git a/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_parser.cpp b/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_parser.cpp
index 448163347..becf7edd1 100644
--- a/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_parser.cpp
+++ b/src/odr/internal/ooxml/spreadsheet/ooxml_spreadsheet_parser.cpp
@@ -71,6 +71,8 @@ void parse_root_children(ElementRegistry &registry, const ParseContext &context,
                                      context.shared_strings());
     const auto &[sheet, _] = parse_any_element_tree(
         registry, sheet_context, sheet_xml.document_element());
+    registry.sheet_element_at(sheet).name =
+        child_node.attribute("name").value();
     registry.append_child(parent_id, sheet);
   }
 }
diff --git a/test/src/document_test.cpp b/test/src/document_test.cpp
index 6cf1bfc9f..fba93cd82 100644
--- a/test/src/document_test.cpp
+++ b/test/src/document_test.cpp
@@ -108,6 +108,23 @@ TEST(Document, odt) {
   EXPECT_EQ(Measure("0.7874in"), page_layout.margin.top);
 }
 
+TEST(Document, xlsx_sheet_names) {
+  const Logger logger = Logger::create_stdio("odr-test", LogLevel::verbose);
+
+  const DocumentFile document_file(
+      TestData::test_file_path("odr-public/xlsx/sampledatainsurance.xlsx"),
+      logger);
+  const Document document = document_file.document();
+
+  std::vector<std::string> names;
+  for (const Element child : document.root_element().children()) {
+    names.push_back(child.as_sheet().name());
+  }
+
+  EXPECT_EQ((std::vector<std::string>{"Instructions", "PolicyData", "MyLinks"}),
+            names);
+}
+
 TEST(Document, odt_element_path) {
   const Logger logger = Logger::create_stdio("odr-test", LogLevel::verbose);
 

From c75628868a5f80a3ba5ebf9da9ed3e9f8de98c74 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:30:40 +0200
Subject: [PATCH 05/12] feat(html): let a sheet reach the window edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`body{padding:5px}` sat in the shared document stylesheet, so every view kept a
five pixel border against the window. On a sheet that is exactly the wrong
place for it: the ruler pins itself to the scrollport edge, and the padding
left a sliver of page showing outside it.

The rule goes, rather than being overridden per document type — paged content
already sets its own padding through `.odr-background`, so what it held back
was the two kinds of view that reflow.

Past the last row and column a sheet now shows canvas instead of more white,
which is where the grid ends rather than where the window does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/frontend.cpp | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index 2b1408a9d..d6d18a56e 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -13,7 +13,6 @@ namespace {
 
 constexpr const char *document_css = R"css(
 *{margin:0;position:relative}
-body{padding:5px}
 x-p{display:block;font-size:0}
 x-s{display:inline}
 .odr-background{padding:0;background:#525659}
@@ -35,8 +34,12 @@ constexpr const char *spreadsheet_css = R"css(
 --odr-sheet-rule:#c8ccd1;
 --odr-sheet-ruler:#f5f6f7;
 --odr-sheet-ruler-text:#5c6169;
+--odr-sheet-canvas:#eceef1;
 --odr-sheet-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 }
+/* A sheet is not a page: past the last row and column is canvas. */
+body{background:var(--odr-sheet-canvas)}
+.odr-sheet{background:#fff}
 table{border-collapse:collapse;table-layout:fixed}
 td{vertical-align:bottom;height:inherit;padding:1px 6px}
 x-p{font-family:var(--odr-sheet-font);font-size:10pt}

From 720b8755d2df16a8b784785c3b47a1818b474c60 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:30:58 +0200
Subject: [PATCH 06/12] feat(html): follow the cursor across a sheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reading a wide row meant tracking a line of cells by eye across a grid with no
markings, and there was no way to say "this one" at all.

The row and column under the pointer are now washed, and a click pins them —
on a cell, its row and its column; on a ruler cell, just what it labels. The
pinned cell is outlined, clicking it again or pressing Escape lets go. The
ruler washes harder than the cells, since the label is what the eye is looking
for at the end of a column.

A row is `tr:hover` in css. A column has no such selector, and walking every
cell of one on each pointer move would not survive a sheet of thousands, so a
single generated `:nth-child` rule lights the whole column at once — free per
cell, but only correct while cell and column line up. A sheet containing a
merged cell therefore gets the row half and not the column half, rather than a
column highlight pointing one cell off.

The wash goes on through `background-image`, which layers over whatever
background the document gave a cell instead of replacing it, and leaves
`box-shadow` to the ruler's separators.

This is the first script a spreadsheet view carries, so
`write_spreadsheet_script` joins the style beside it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/document.cpp |   3 +
 src/odr/internal/html/frontend.cpp | 134 +++++++++++++++++++++++++++++
 src/odr/internal/html/frontend.hpp |   2 +
 3 files changed, 139 insertions(+)

diff --git a/src/odr/internal/html/document.cpp b/src/odr/internal/html/document.cpp
index c0470aa45..0621d6086 100644
--- a/src/odr/internal/html/document.cpp
+++ b/src/odr/internal/html/document.cpp
@@ -94,6 +94,9 @@ void back(const Document &document, const WritingState &state) {
   }
 
   write_document_script(state);
+  if (document.document_type() == DocumentType::spreadsheet) {
+    write_spreadsheet_script(state);
+  }
 
   out.write_body_end();
   out.write_end();
diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index d6d18a56e..7b0fabb28 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -35,6 +35,10 @@ constexpr const char *spreadsheet_css = R"css(
 --odr-sheet-ruler:#f5f6f7;
 --odr-sheet-ruler-text:#5c6169;
 --odr-sheet-canvas:#eceef1;
+--odr-sheet-wash:rgba(0,0,0,.045);
+--odr-sheet-wash-pinned:rgba(0,0,0,.09);
+--odr-sheet-wash-ruler:rgba(0,0,0,.10);
+--odr-sheet-focus:#3c78dc;
 --odr-sheet-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 }
 /* A sheet is not a page: past the last row and column is canvas. */
@@ -53,6 +57,12 @@ td x-p{height:inherit}
 .odr-gridlines-soft .odr-sheet td{border-top:1px solid var(--odr-sheet-line);border-left:1px solid var(--odr-sheet-line)}
 .odr-gridlines-hard .odr-sheet td{border:1px solid var(--odr-sheet-line)!important}
 .odr-sheet td.odr-value-type-float{text-align:right}
+/* `background-image` layers over the document's own cell background instead of
+   replacing it, and leaves `box-shadow` to the ruler. */
+.odr-sheet tbody tr:hover>*{background-image:linear-gradient(var(--odr-sheet-wash),var(--odr-sheet-wash))}
+.odr-sheet tbody tr.odr-sheet-pinned>*{background-image:linear-gradient(var(--odr-sheet-wash-pinned),var(--odr-sheet-wash-pinned))}
+.odr-sheet tbody tr:hover>th,.odr-sheet tbody tr.odr-sheet-pinned>th{background-image:linear-gradient(var(--odr-sheet-wash-ruler),var(--odr-sheet-wash-ruler))}
+.odr-sheet .odr-sheet-pinned-cell{outline:2px solid var(--odr-sheet-focus);outline-offset:-2px}
 )css";
 
 constexpr const char *text_css = R"css(
@@ -250,6 +260,124 @@ constexpr const char *document_js = R"js(
 })();
 )js";
 
+/// Highlights the row and column under the pointer, and pins them on a click.
+/// A column has no `:hover` selector, so one generated `:nth-child` rule lights
+/// it — free per cell, but only correct while cell and column line up.
+constexpr const char *spreadsheet_js = R"js(
+(function () {
+  "use strict";
+
+  var table = document.querySelector(".odr-sheet");
+  if (table === null) {
+    return;
+  }
+
+  var merged = table.querySelector("td[colspan],td[rowspan]") !== null;
+
+  var style = document.createElement("style");
+  document.head.appendChild(style);
+
+  var hovered = -1;
+  var pinnedColumn = -1;
+  var pinnedRow = null;
+  var pinnedCell = null;
+
+  // Column 0 is the gutter, which labels no column.
+  function columnRule(index, wash, scope) {
+    if (index < 1) {
+      return "";
+    }
+    return (
+      ".odr-sheet " +
+      scope +
+      "tr>:nth-child(" +
+      (index + 1) +
+      "){background-image:linear-gradient(" +
+      wash +
+      "," +
+      wash +
+      ")}"
+    );
+  }
+
+  // The ruler reacts harder than the cells: it is the label being followed.
+  function paint() {
+    style.textContent =
+      columnRule(hovered, "var(--odr-sheet-wash)", "") +
+      columnRule(pinnedColumn, "var(--odr-sheet-wash-pinned)", "") +
+      columnRule(hovered, "var(--odr-sheet-wash-ruler)", "thead ") +
+      columnRule(pinnedColumn, "var(--odr-sheet-wash-ruler)", "thead ");
+  }
+
+  function columnOf(cell) {
+    return cell !== null && !merged ? cell.cellIndex : -1;
+  }
+
+  function pin(column, row, cell) {
+    if (pinnedRow !== null) {
+      pinnedRow.classList.remove("odr-sheet-pinned");
+    }
+    if (pinnedCell !== null) {
+      pinnedCell.classList.remove("odr-sheet-pinned-cell");
+    }
+
+    pinnedColumn = column;
+    pinnedRow = row;
+    pinnedCell = cell;
+
+    if (pinnedRow !== null) {
+      pinnedRow.classList.add("odr-sheet-pinned");
+    }
+    if (pinnedCell !== null) {
+      pinnedCell.classList.add("odr-sheet-pinned-cell");
+    }
+    paint();
+  }
+
+  table.addEventListener("mouseover", function (event) {
+    var column = columnOf(event.target.closest("td,th"));
+    if (column !== hovered) {
+      hovered = column;
+      paint();
+    }
+  });
+
+  table.addEventListener("mouseleave", function () {
+    hovered = -1;
+    paint();
+  });
+
+  table.addEventListener("click", function (event) {
+    var cell = event.target.closest("td,th");
+    if (cell === null) {
+      return;
+    }
+
+    // Clicking what is pinned clears it.
+    if (cell === pinnedCell) {
+      pin(-1, null, null);
+      return;
+    }
+
+    if (cell.classList.contains("odr-sheet-column-header")) {
+      pin(columnOf(cell), null, cell);
+    } else if (cell.classList.contains("odr-sheet-row-header")) {
+      pin(-1, cell.parentElement, cell);
+    } else if (cell.classList.contains("odr-sheet-corner")) {
+      pin(-1, null, null);
+    } else {
+      pin(columnOf(cell), cell.parentElement, cell);
+    }
+  });
+
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+      pin(-1, null, null);
+    }
+  });
+})();
+)js";
+
 /// Every input is applied to the line `<div>`s by hand, so the line numbers
 /// stay in step and undo/redo replay changes instead of the browser's history.
 constexpr const char *text_js = R"js(
@@ -604,6 +732,8 @@ constexpr Asset media_css_asset{HtmlResourceType::css, "text/css", "media.css",
                                 media_css};
 constexpr Asset document_js_asset{HtmlResourceType::js, "text/javascript",
                                   "document.js", document_js};
+constexpr Asset spreadsheet_js_asset{HtmlResourceType::js, "text/javascript",
+                                     "spreadsheet.js", spreadsheet_js};
 constexpr Asset text_js_asset{HtmlResourceType::js, "text/javascript",
                               "text.js", text_js};
 
@@ -668,6 +798,10 @@ void html::write_document_script(const WritingState &state) {
   write_script(document_js_asset, state);
 }
 
+void html::write_spreadsheet_script(const WritingState &state) {
+  write_script(spreadsheet_js_asset, state);
+}
+
 void html::write_text_script(const WritingState &state) {
   write_script(text_js_asset, state);
 }
diff --git a/src/odr/internal/html/frontend.hpp b/src/odr/internal/html/frontend.hpp
index 7241ab3b0..7f84ca696 100644
--- a/src/odr/internal/html/frontend.hpp
+++ b/src/odr/internal/html/frontend.hpp
@@ -16,6 +16,8 @@ void write_media_style(const WritingState &state);
 /// The `odr` object a document view exposes to its host: `generateDiff()`,
 /// `search()`, `searchNext()`, `searchPrevious()`, `resetSearch()`.
 void write_document_script(const WritingState &state);
+/// Written in addition to the document script.
+void write_spreadsheet_script(const WritingState &state);
 void write_text_script(const WritingState &state);
 
 } // namespace odr::internal::html

From 679aba6c58fd340882aaa0d7960250e123d28fc4 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:37:04 +0200
Subject: [PATCH 07/12] feat(html): sort a sheet by one of its columns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A rendered sheet could only be read in the order it was written in.

Each column header grows a control on hover that sorts by that column,
ascending, then descending, then back to the document's own order. The header
itself still pins the column, so a sort is never something a click lands on by
accident, and the control is the only thing that reorders anything.

Values sort the way a spreadsheet sorts them: numbers first, then text, then
blanks, with blanks last in both directions because a blank is the absence of a
value rather than the smallest one. That ordering is per cell rather than per
column, so a column of figures under a label still sorts by its figures. The
sort is stable, so equal values keep the order the document had them in.

The number behind a cell is not in the markup, only the text it rendered as, so
a cell the document calls numeric is read back with the later of `.` and `,`
taken as the decimal separator — enough for 1,234.56 and 1.234,56 without
knowing the locale — and anything that will not read back stays text.

The row numbers do not renumber: they say which row of the document this is,
which is the only thing that makes a sorted view legible.

A sheet with a merged cell gets no sort control at all. A `rowspan` reaches
into a row that would no longer be under it, and there is no honest way to
reorder around that.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/frontend.cpp | 135 ++++++++++++++++++++++++++++-
 1 file changed, 134 insertions(+), 1 deletion(-)

diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index 7b0fabb28..57fa30636 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -51,7 +51,7 @@ td x-p{height:inherit}
 /* Sticky cells in a collapsed border model do not repaint their borders in
    Chrome or WebKit, so the ruler uses inset shadows. */
 .odr-sheet th{position:sticky;background:var(--odr-sheet-ruler);color:var(--odr-sheet-ruler-text);font:500 11px/1.6 var(--odr-sheet-font);text-align:center;vertical-align:middle;padding:0 4px;white-space:nowrap;user-select:none}
-.odr-sheet thead th{top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--odr-sheet-rule),inset -1px 0 0 var(--odr-sheet-line)}
+.odr-sheet thead th{top:0;z-index:2;height:22px;box-shadow:inset 0 -1px 0 var(--odr-sheet-rule),inset -1px 0 0 var(--odr-sheet-line)}
 .odr-sheet-row-header{left:0;z-index:1;box-shadow:inset -1px 0 0 var(--odr-sheet-rule),inset 0 -1px 0 var(--odr-sheet-line)}
 .odr-sheet-corner{left:0;z-index:3;box-shadow:inset -1px 0 0 var(--odr-sheet-rule),inset 0 -1px 0 var(--odr-sheet-rule)}
 .odr-gridlines-soft .odr-sheet td{border-top:1px solid var(--odr-sheet-line);border-left:1px solid var(--odr-sheet-line)}
@@ -63,6 +63,12 @@ td x-p{height:inherit}
 .odr-sheet tbody tr.odr-sheet-pinned>*{background-image:linear-gradient(var(--odr-sheet-wash-pinned),var(--odr-sheet-wash-pinned))}
 .odr-sheet tbody tr:hover>th,.odr-sheet tbody tr.odr-sheet-pinned>th{background-image:linear-gradient(var(--odr-sheet-wash-ruler),var(--odr-sheet-wash-ruler))}
 .odr-sheet .odr-sheet-pinned-cell{outline:2px solid var(--odr-sheet-focus);outline-offset:-2px}
+/* `*{position:relative}` already makes the header a containing block. */
+.odr-sheet-sort{position:absolute;top:1px;right:1px;bottom:1px;width:17px;display:flex;align-items:center;justify-content:center;border-radius:2px;opacity:0;cursor:pointer}
+.odr-sheet-column-header:hover .odr-sheet-sort,.odr-sheet-sort-asc,.odr-sheet-sort-desc{opacity:1}
+.odr-sheet-sort:hover{background:var(--odr-sheet-wash-ruler)}
+.odr-sheet-sort::after{content:"\25BE";font-size:15px;line-height:1}
+.odr-sheet-sort-asc::after{content:"\25B4"}
 )css";
 
 constexpr const char *text_css = R"css(
@@ -375,6 +381,133 @@ constexpr const char *spreadsheet_js = R"js(
       pin(-1, null, null);
     }
   });
+
+  var body = table.tBodies[0];
+  var original = null;
+  var sortedColumn = -1;
+  var sortedDirection = 0;
+
+  // Only the rendered text is in the markup, not the number behind it. The last
+  // separator is the decimal one, which settles 1,234.56 against 1.234,56.
+  function toNumber(text) {
+    var cleaned = text.replace(/[^0-9,.eE+-]/g, "");
+    if (cleaned.lastIndexOf(",") > cleaned.lastIndexOf(".")) {
+      cleaned = cleaned.replace(/\./g, "").replace(",", ".");
+    } else {
+      cleaned = cleaned.replace(/,/g, "");
+    }
+    var value = parseFloat(cleaned);
+    return isFinite(value) ? value : NaN;
+  }
+
+  // Numbers, then text, then blanks: no column is forced into one kind.
+  var NUMBER = 0;
+  var TEXT = 1;
+  var BLANK = 2;
+
+  function keyOf(row, index) {
+    var cell = row.children[index];
+    var text = cell === undefined ? "" : cell.textContent.trim();
+    if (text === "") {
+      return { rank: BLANK, value: 0 };
+    }
+    if (cell.classList.contains("odr-value-type-float")) {
+      var value = toNumber(text);
+      if (!isNaN(value)) {
+        return { rank: NUMBER, value: value };
+      }
+    }
+    return { rank: TEXT, value: text };
+  }
+
+  function reorder(rows) {
+    var fragment = document.createDocumentFragment();
+    for (var i = 0; i < rows.length; ++i) {
+      fragment.appendChild(rows[i]);
+    }
+    body.appendChild(fragment);
+  }
+
+  function sortBy(index, direction) {
+    if (original === null) {
+      original = Array.prototype.slice.call(body.rows);
+    }
+    if (direction === 0) {
+      reorder(original);
+      return;
+    }
+
+    var rows = Array.prototype.slice.call(body.rows);
+    var keys = new Map();
+    for (var i = 0; i < rows.length; ++i) {
+      keys.set(rows[i], keyOf(rows[i], index));
+    }
+
+    // A blank is an absent value, not the smallest one, so it stays last either
+    // way round. The stable sort keeps the document's order for ties.
+    rows.sort(function (a, b) {
+      var x = keys.get(a);
+      var y = keys.get(b);
+      if (x.rank === BLANK || y.rank === BLANK) {
+        return x.rank === y.rank ? 0 : x.rank === BLANK ? 1 : -1;
+      }
+      if (x.rank !== y.rank) {
+        return (x.rank - y.rank) * direction;
+      }
+      var result =
+        x.rank === NUMBER
+          ? x.value - y.value
+          : x.value.localeCompare(y.value, undefined, { numeric: true });
+      return result * direction;
+    });
+    reorder(rows);
+  }
+
+  // A `rowspan` would reach into a row no longer beneath it and a `colspan`
+  // breaks the column index, so a merged sheet gets no sort control.
+  if (!merged) {
+    var headers = table.tHead.rows[0].children;
+    for (var column = 1; column < headers.length; ++column) {
+      var control = document.createElement("span");
+      control.className = "odr-sheet-sort";
+      control.setAttribute("title", "sort by column " + headers[column].textContent);
+      headers[column].appendChild(control);
+    }
+
+    table.addEventListener(
+      "click",
+      function (event) {
+        var control = event.target.closest(".odr-sheet-sort");
+        if (control === null) {
+          return;
+        }
+        // The header itself pins the column; only this control sorts it.
+        event.stopPropagation();
+
+        var index = control.parentElement.cellIndex;
+        var direction =
+          index !== sortedColumn ? 1 : sortedDirection === 1 ? -1 : 0;
+
+        sortBy(index, direction);
+
+        control.classList.remove("odr-sheet-sort-asc", "odr-sheet-sort-desc");
+        if (direction === 1) {
+          control.classList.add("odr-sheet-sort-asc");
+        } else if (direction === -1) {
+          control.classList.add("odr-sheet-sort-desc");
+        }
+        if (sortedColumn !== index && sortedColumn >= 0) {
+          headers[sortedColumn]
+            .querySelector(".odr-sheet-sort")
+            .classList.remove("odr-sheet-sort-asc", "odr-sheet-sort-desc");
+        }
+
+        sortedColumn = direction === 0 ? -1 : index;
+        sortedDirection = direction;
+      },
+      true
+    );
+  }
 })();
 )js";
 

From fa1276a372212071e5cd74efd5f213329a4947cb Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:43:37 +0200
Subject: [PATCH 08/12] feat(html): list an archive as a table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An archive listed as a run of `<p>`s in monospace, each a row of `<span>`s
reading "path file 1048576 download" — the size in bytes with no separators,
the kind spelled out per entry, and no alignment between one line and the next.

It is a table now, because it always was one: a path, a size and a download
control, with a row under the pointer picking itself out and the sizes
right-aligned in tabular figures so they can be compared down the column. A
directory says so with the trailing separator every file listing has used and
carries no size, rather than spending a column on the distinction.

Sizes read as binary multiples and are named as such, so 1.4 MiB is not a
number whose base the reader has to guess.

Nothing in it is written in a language. There is no header row, because a
path, a size and a download arrow do not need to be labelled and the labels
would have been the only words on the page. Download is a glyph rather than the
word — U+2193, not one of the download arrows, which are missing from enough
system fonts to leave a tofu box where a control with no text has nothing to
fall back on. Its title is the file's name, which is what a tooltip and a
screen reader read and is not a word in anyone's language.

The listing gets its own stylesheet rather than the one rule it had inline, so
it travels the same way the rest of the frontend does.

No archive reaches the reference-output suite — every zip in the test data is
opened as the document inside it — so this comes with the test that renders one
by forcing the type.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/filesystem.cpp | 98 ++++++++++++++++++++--------
 src/odr/internal/html/frontend.cpp   | 27 ++++++++
 src/odr/internal/html/frontend.hpp   |  1 +
 test/src/html_test.cpp               | 34 ++++++++++
 4 files changed, 133 insertions(+), 27 deletions(-)

diff --git a/src/odr/internal/html/filesystem.cpp b/src/odr/internal/html/filesystem.cpp
index 79a824744..a08c54c26 100644
--- a/src/odr/internal/html/filesystem.cpp
+++ b/src/odr/internal/html/filesystem.cpp
@@ -7,12 +7,35 @@
 #include <odr/internal/abstract/file.hpp>
 #include <odr/internal/common/path.hpp>
 #include <odr/internal/html/common.hpp>
+#include <odr/internal/html/frontend.hpp>
 #include <odr/internal/html/html_service.hpp>
 #include <odr/internal/html/html_writer.hpp>
 
+#include <array>
+#include <iomanip>
+#include <sstream>
+
 namespace odr::internal::html {
 namespace {
 
+/// Binary multiples, named as such — nothing to guess the base of.
+std::string human_size(const std::size_t size) {
+  static constexpr std::array<const char *, 5> units{"B", "KiB", "MiB", "GiB",
+                                                     "TiB"};
+
+  double value = static_cast<double>(size);
+  std::size_t unit = 0;
+  while (value >= 1024.0 && unit + 1 < units.size()) {
+    value /= 1024.0;
+    ++unit;
+  }
+
+  std::ostringstream result;
+  result << std::fixed << std::setprecision(unit == 0 ? 0 : 1) << value << " "
+         << units.at(unit);
+  return result.str();
+}
+
 class HtmlServiceImpl final : public HtmlService {
 public:
   HtmlServiceImpl(Filesystem filesystem, HtmlConfig config,
@@ -60,6 +83,7 @@ class HtmlServiceImpl final : public HtmlService {
 
   HtmlResources write_filesystem(HtmlWriter &out) const {
     HtmlResources resources;
+    const WritingState state(out, config(), resources);
 
     const FileWalker file_walker = m_filesystem.file_walker("/");
 
@@ -70,53 +94,73 @@ class HtmlServiceImpl final : public HtmlService {
     out.write_header_target("_blank");
     out.write_header_title("odr");
     write_viewport_meta(out, config(), false);
-    out.write_header_style_begin();
-    out.write_raw("*{font-family:monospace;}");
-    out.write_header_style_end();
+    write_filesystem_style(state);
     out.write_header_end();
 
     out.write_body_begin();
 
-    const auto span = [&out](const HtmlWritable &content) {
-      out.write_element_begin("span");
-      out.write_raw(content);
-      out.write_element_end("span");
-    };
+    out.write_element_begin("table",
+                            HtmlElementOptions().set_class("odr-files"));
+
+    // No header row: labels would be the only words in the page to translate.
+    out.write_element_begin("tbody");
 
     for (; !file_walker.end(); file_walker.next()) {
       const Path file_path(file_walker.path());
       const bool is_file = file_walker.is_file();
 
-      out.write_element_begin("p");
-
-      span(escape_text(file_path.string()));
-      span(" ");
-      span(is_file ? "file" : "directory");
-
+      out.write_element_begin("tr", HtmlElementOptions().set_class(
+                                        is_file ? std::nullopt
+                                                : std::optional<HtmlWritable>(
+                                                      "odr-files-directory")));
+
+      // A trailing separator says "directory" without a column saying so.
+      out.write_element_begin(
+          "td",
+          HtmlElementOptions().set_inline(true).set_class("odr-files-name"));
+      out.write_raw(
+          escape_text(is_file ? file_path.string() : file_path.string() + "/"));
+      out.write_element_end("td");
+
+      const File file =
+          is_file ? m_filesystem.open(file_path.string()) : File();
+
+      out.write_element_begin(
+          "td",
+          HtmlElementOptions().set_inline(true).set_class("odr-files-size"));
       if (is_file) {
-        span(" ");
-
-        File file = m_filesystem.open(file_path.string());
-
-        span(std::to_string(file.size()));
+        out.write_raw(human_size(file.size()));
+      }
+      out.write_element_end("td");
 
+      out.write_element_begin(
+          "td",
+          HtmlElementOptions().set_inline(true).set_class("odr-files-action"));
+      if (is_file) {
         if (const std::unique_ptr<std::istream> stream = file.stream();
             stream != nullptr) {
-          span(" ");
-
+          const std::string name = file_path.basename();
+          // The glyph has no name of its own; the file's is what a tooltip and
+          // a screen reader read.
           out.write_element_begin(
-              "a",
-              HtmlElementOptions().set_attributes(HtmlAttributesVector{
-                  {"href", file_to_url(*stream, "application/octet-stream")},
-                  {"download", escape_attribute(file_path.basename())}}));
-          out.write_raw("download");
+              "a", HtmlElementOptions().set_inline(true).set_attributes(
+                       HtmlAttributesVector{
+                           {"href",
+                            file_to_url(*stream, "application/octet-stream")},
+                           {"download", escape_attribute(name)},
+                           {"title", escape_attribute(name)}}));
+          out.write_raw("\u2193");
           out.write_element_end("a");
         }
       }
+      out.write_element_end("td");
 
-      out.write_element_end("p");
+      out.write_element_end("tr");
     }
 
+    out.write_element_end("tbody");
+    out.write_element_end("table");
+
     out.write_body_end();
 
     out.write_end();
diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index 57fa30636..7d5c48b75 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -79,6 +79,27 @@ constexpr const char *text_css = R"css(
 [contenteditable]:focus{outline:none}
 )css";
 
+constexpr const char *filesystem_css = R"css(
+:root{
+--odr-files-line:#e3e5e8;
+--odr-files-muted:#5c6169;
+--odr-files-link:#3c78dc;
+--odr-files-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+--odr-files-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+}
+body{background:#fff;color:#1f2328;font:13px/1.5 var(--odr-files-font)}
+.odr-files{border-collapse:collapse;width:100%}
+.odr-files td{padding:5px 12px;border-top:1px solid var(--odr-files-line)}
+.odr-files tbody tr:hover>*{background-image:linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04))}
+.odr-files-name{font-family:var(--odr-files-mono);word-break:break-all}
+.odr-files-directory .odr-files-name{color:var(--odr-files-muted)}
+.odr-files-size{width:1%;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--odr-files-muted)}
+.odr-files-action{width:1%;white-space:nowrap}
+/* U+2193: the download glyphs are missing from enough system fonts to tofu. */
+.odr-files-action a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:var(--odr-files-muted);font-size:15px;line-height:1;text-decoration:none}
+.odr-files-action a:hover{background:rgba(0,0,0,.07);color:var(--odr-files-link)}
+)css";
+
 constexpr const char *media_css = R"css(
 .odr-media{display:flex;align-items:center;justify-content:center;margin:0;min-height:100vh;background:#000}
 .odr-media video{max-width:100%;max-height:100vh}
@@ -861,6 +882,8 @@ constexpr Asset spreadsheet_css_asset{HtmlResourceType::css, "text/css",
                                       "spreadsheet.css", spreadsheet_css};
 constexpr Asset text_css_asset{HtmlResourceType::css, "text/css", "text.css",
                                text_css};
+constexpr Asset filesystem_css_asset{HtmlResourceType::css, "text/css",
+                                     "filesystem.css", filesystem_css};
 constexpr Asset media_css_asset{HtmlResourceType::css, "text/css", "media.css",
                                 media_css};
 constexpr Asset document_js_asset{HtmlResourceType::js, "text/javascript",
@@ -923,6 +946,10 @@ void html::write_text_style(const WritingState &state) {
   write_style(text_css_asset, state);
 }
 
+void html::write_filesystem_style(const WritingState &state) {
+  write_style(filesystem_css_asset, state);
+}
+
 void html::write_media_style(const WritingState &state) {
   write_style(media_css_asset, state);
 }
diff --git a/src/odr/internal/html/frontend.hpp b/src/odr/internal/html/frontend.hpp
index 7f84ca696..d831e9af3 100644
--- a/src/odr/internal/html/frontend.hpp
+++ b/src/odr/internal/html/frontend.hpp
@@ -11,6 +11,7 @@ void write_document_style(const WritingState &state);
 /// Written in addition to the document style.
 void write_spreadsheet_style(const WritingState &state);
 void write_text_style(const WritingState &state);
+void write_filesystem_style(const WritingState &state);
 void write_media_style(const WritingState &state);
 
 /// The `odr` object a document view exposes to its host: `generateDiff()`,
diff --git a/test/src/html_test.cpp b/test/src/html_test.cpp
index 88f4cad2f..ccf5c0d10 100644
--- a/test/src/html_test.cpp
+++ b/test/src/html_test.cpp
@@ -1,4 +1,6 @@
 #include <filesystem>
+#include <fstream>
+
 #include <odr/html.hpp>
 
 #include <odr/exceptions.hpp>
@@ -11,6 +13,38 @@ using namespace odr;
 using namespace odr::internal;
 using namespace odr::test;
 
+// The one archive the reference-output suite renders has no directory in it.
+TEST(html, archive_listing) {
+  const auto logger = Logger::create_stdio("odr-test", LogLevel::verbose);
+
+  const DecodedFile file(TestData::test_file_path("odr-public/odt/about.odt"),
+                         FileType::zip, logger);
+  ASSERT_TRUE(file.is_archive_file());
+
+  const std::string output_path =
+      (std::filesystem::current_path() / "archive").string();
+  const HtmlConfig config(output_path);
+  const Html html =
+      html::translate(file, config, logger).bring_offline(output_path);
+
+  ASSERT_EQ(html.pages().size(), 1);
+  std::ifstream in(html.pages().front().path);
+  const std::string page((std::istreambuf_iterator<char>(in)),
+                         std::istreambuf_iterator<char>());
+
+  EXPECT_NE(page.find(R"(<table class="odr-files">)"), std::string::npos);
+  // no header row: the listing carries no words to translate
+  EXPECT_EQ(page.find("<thead>"), std::string::npos);
+  EXPECT_NE(page.find(R"(<td class="odr-files-name">/mimetype</td>)"),
+            std::string::npos);
+  // a directory says so by its trailing separator and carries no size
+  EXPECT_NE(page.find(R"(<tr class="odr-files-directory">)"),
+            std::string::npos);
+  EXPECT_NE(
+      page.find(R"(<td class="odr-files-name">/Configurations2/menubar/</td>)"),
+      std::string::npos);
+}
+
 TEST(html, views) {
   const auto logger = Logger::create_stdio("odr-test", LogLevel::verbose);
 

From 908b1e21b6a552e0bfa050fb7f15b5b709e6e1fc Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 10:47:51 +0200
Subject: [PATCH 09/12] feat(html): set the sheet's ruler a size up

11px was small enough that a column letter took a second look to read, which is
the opposite of what a ruler is for. The letters, the row numbers and the sheet
tabs go to 12px, and the header row grows the two pixels that keeps them off
its edges.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HcgniS5pgVa4rV1yHxuKm7
---
 src/odr/internal/html/frontend.cpp | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index 7d5c48b75..146f423ff 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -50,8 +50,8 @@ x-p{font-family:var(--odr-sheet-font);font-size:10pt}
 td x-p{height:inherit}
 /* Sticky cells in a collapsed border model do not repaint their borders in
    Chrome or WebKit, so the ruler uses inset shadows. */
-.odr-sheet th{position:sticky;background:var(--odr-sheet-ruler);color:var(--odr-sheet-ruler-text);font:500 11px/1.6 var(--odr-sheet-font);text-align:center;vertical-align:middle;padding:0 4px;white-space:nowrap;user-select:none}
-.odr-sheet thead th{top:0;z-index:2;height:22px;box-shadow:inset 0 -1px 0 var(--odr-sheet-rule),inset -1px 0 0 var(--odr-sheet-line)}
+.odr-sheet th{position:sticky;background:var(--odr-sheet-ruler);color:var(--odr-sheet-ruler-text);font:500 12px/1.6 var(--odr-sheet-font);text-align:center;vertical-align:middle;padding:0 4px;white-space:nowrap;user-select:none}
+.odr-sheet thead th{top:0;z-index:2;height:24px;box-shadow:inset 0 -1px 0 var(--odr-sheet-rule),inset -1px 0 0 var(--odr-sheet-line)}
 .odr-sheet-row-header{left:0;z-index:1;box-shadow:inset -1px 0 0 var(--odr-sheet-rule),inset 0 -1px 0 var(--odr-sheet-line)}
 .odr-sheet-corner{left:0;z-index:3;box-shadow:inset -1px 0 0 var(--odr-sheet-rule),inset 0 -1px 0 var(--odr-sheet-rule)}
 .odr-gridlines-soft .odr-sheet td{border-top:1px solid var(--odr-sheet-line);border-left:1px solid var(--odr-sheet-line)}

From d890ced3866f0d11a2ac37f216fb923d7ce5098b Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 14:25:40 +0200
Subject: [PATCH 10/12] test(data): pin the reference output the sheet chrome
 emits

Every html the generic renderer writes changed: the css and js are linked
rather than inlined, a sheet's ruler is `<thead>`/`<th>`, and an archive is a
table. The reference repos carry the regenerated output and a `filesystem.css`
that did not exist before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nk1S12YmjBsmksSJ4tVB3X
---
 test/data.cmake | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/data.cmake b/test/data.cmake
index 6447624b9..43b6b11d6 100644
--- a/test/data.cmake
+++ b/test/data.cmake
@@ -17,9 +17,9 @@ odr_test_data(
 odr_test_data(
         PATH "reference-output/odr-public"
         URL "https://github.com/opendocument-app/OpenDocument.test.output.git"
-        REVISION "e9aa12feb1601896f38ecbd04d7d84c31d805d26")
+        REVISION "5d817e661fd9b83aeadf9f9f1b829b658a10303b")
 
 odr_test_data(
         PATH "reference-output/odr-private"
         URL "https://github.com/opendocument-app/OpenDocument.test-private.output.git"
-        REVISION "7b9a508e84e3f281dfb9808e0dd03e2e70fd2cff")
+        REVISION "000a6b92c4498797edd0e47a875ff1124ba4eef8")

From 3d8d1bc46a1e86c7f4a295389603fc0ae8ed4526 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 14:36:15 +0200
Subject: [PATCH 11/12] refactor(html): hold the shipped css and js as
 string_view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The renderer's stylesheets and scripts were `const char *`, so their length was
a `strlen` away wherever it was wanted. `std::string_view` carries it, and an
`Asset` field that names a mime type or a file name says so in its type.

The two places that need an owning string — `HtmlResource::create` and
`File::from_memory` — convert explicitly. Emitted output is unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nk1S12YmjBsmksSJ4tVB3X
---
 src/odr/internal/html/frontend.cpp | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index 146f423ff..b24545c64 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -7,11 +7,14 @@
 #include <odr/internal/html/html_service.hpp>
 #include <odr/internal/html/html_writer.hpp>
 
+#include <string>
+#include <string_view>
+
 namespace odr::internal::html {
 
 namespace {
 
-constexpr const char *document_css = R"css(
+constexpr std::string_view document_css = R"css(
 *{margin:0;position:relative}
 x-p{display:block;font-size:0}
 x-s{display:inline}
@@ -28,7 +31,7 @@ mark.current{background:orange}
 
 /// No `text-overflow`: it sat on `td`, whose overflow is visible, and making it
 /// work would mean clipping.
-constexpr const char *spreadsheet_css = R"css(
+constexpr std::string_view spreadsheet_css = R"css(
 :root{
 --odr-sheet-line:#e3e5e8;
 --odr-sheet-rule:#c8ccd1;
@@ -71,7 +74,7 @@ td x-p{height:inherit}
 .odr-sheet-sort-asc::after{content:"\25B4"}
 )css";
 
-constexpr const char *text_css = R"css(
+constexpr std::string_view text_css = R"css(
 .odr-text{display:flex;flex-direction:row;font-family:monospace}
 .odr-text-nr{display:flex;flex-direction:column;text-align:right;vertical-align:top;color:#999;border-right:solid #999}
 .odr-text-body{display:flex;flex-direction:column;padding-left:5pt;white-space:pre}
@@ -79,7 +82,7 @@ constexpr const char *text_css = R"css(
 [contenteditable]:focus{outline:none}
 )css";
 
-constexpr const char *filesystem_css = R"css(
+constexpr std::string_view filesystem_css = R"css(
 :root{
 --odr-files-line:#e3e5e8;
 --odr-files-muted:#5c6169;
@@ -100,13 +103,13 @@ body{background:#fff;color:#1f2328;font:13px/1.5 var(--odr-files-font)}
 .odr-files-action a:hover{background:rgba(0,0,0,.07);color:var(--odr-files-link)}
 )css";
 
-constexpr const char *media_css = R"css(
+constexpr std::string_view media_css = R"css(
 .odr-media{display:flex;align-items:center;justify-content:center;margin:0;min-height:100vh;background:#000}
 .odr-media video{max-width:100%;max-height:100vh}
 .odr-media audio{width:100%;max-width:40rem;margin:0 1rem}
 )css";
 
-constexpr const char *document_js = R"js(
+constexpr std::string_view document_js = R"js(
 (function () {
   "use strict";
 
@@ -290,7 +293,7 @@ constexpr const char *document_js = R"js(
 /// Highlights the row and column under the pointer, and pins them on a click.
 /// A column has no `:hover` selector, so one generated `:nth-child` rule lights
 /// it — free per cell, but only correct while cell and column line up.
-constexpr const char *spreadsheet_js = R"js(
+constexpr std::string_view spreadsheet_js = R"js(
 (function () {
   "use strict";
 
@@ -534,7 +537,7 @@ constexpr const char *spreadsheet_js = R"js(
 
 /// Every input is applied to the line `<div>`s by hand, so the line numbers
 /// stay in step and undo/redo replay changes instead of the browser's history.
-constexpr const char *text_js = R"js(
+constexpr std::string_view text_js = R"js(
 (function () {
   "use strict";
 
@@ -871,9 +874,9 @@ constexpr const char *text_js = R"js(
 /// @ref odr::HtmlConfig::embed_shipped_resources means.
 struct Asset {
   HtmlResourceType type;
-  const char *mime_type;
-  const char *name;
-  const char *content;
+  std::string_view mime_type;
+  std::string_view name;
+  std::string_view content;
 };
 
 constexpr Asset document_css_asset{HtmlResourceType::css, "text/css",
@@ -896,8 +899,9 @@ constexpr Asset text_js_asset{HtmlResourceType::js, "text/javascript",
 /// Registers @p asset among the view's resources; `nullopt` to embed it.
 HtmlResourceLocation locate(const Asset &asset, const WritingState &state) {
   const odr::HtmlResource resource = HtmlResource::create(
-      asset.type, asset.mime_type, asset.name, asset.name,
-      odr::File::from_memory(asset.content), true, false, true);
+      asset.type, std::string(asset.mime_type), std::string(asset.name),
+      std::string(asset.name),
+      odr::File::from_memory(std::string(asset.content)), true, false, true);
   HtmlResourceLocation location =
       state.config().resource_locator(resource, state.config());
   state.resources().emplace_back(resource, location);

From 05689496aa44ae92921b025c0d34202db326ae12 Mon Sep 17 00:00:00 2001
From: Andreas Stefl <stefl.andreas@gmail.com>
Date: Sun, 9 Aug 2026 14:48:43 +0200
Subject: [PATCH 12/12] fix(html): serve the css and js a simple view links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`embed_shipped_resources=false` makes the filesystem, text and media views link
their stylesheets and scripts, but their services only ever answered for their
own view path — so `HttpServer` returned 404 and `write("filesystem.css")`
threw, and the view loaded unstyled. Only `bring_offline` worked, because it
writes the `HtmlResources` the render hands back.

Each of the three now locates its assets up front, without rendering, and
answers `exists`/`mimetype`/`write` for them. The document service already did
this off its warmup cache; the lookup all four share is `resource_at`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nk1S12YmjBsmksSJ4tVB3X
---
 src/odr/internal/html/document.cpp     | 25 +++++---------
 src/odr/internal/html/filesystem.cpp   | 16 +++++++--
 src/odr/internal/html/frontend.cpp     | 42 ++++++++++++++++++++----
 src/odr/internal/html/frontend.hpp     |  9 ++++++
 src/odr/internal/html/html_service.cpp | 15 +++++++++
 src/odr/internal/html/html_service.hpp |  5 +++
 src/odr/internal/html/media_file.cpp   | 17 ++++++++--
 src/odr/internal/html/text_file.cpp    | 17 ++++++++--
 test/src/html_test.cpp                 | 45 ++++++++++++++++++++++++++
 9 files changed, 161 insertions(+), 30 deletions(-)

diff --git a/src/odr/internal/html/document.cpp b/src/odr/internal/html/document.cpp
index 0621d6086..062d4764b 100644
--- a/src/odr/internal/html/document.cpp
+++ b/src/odr/internal/html/document.cpp
@@ -206,14 +206,7 @@ class HtmlServiceImpl final : public HtmlService {
 
     warmup();
 
-    if (std::ranges::any_of(m_resources, [&path](const auto &pair) {
-          const auto &[resource, location] = pair;
-          return location.has_value() && location.value() == path;
-        })) {
-      return true;
-    }
-
-    return false;
+    return resource_at(m_resources, path) != nullptr;
   }
 
   std::string mimetype(const std::string &path) const override {
@@ -225,10 +218,9 @@ class HtmlServiceImpl final : public HtmlService {
 
     warmup();
 
-    for (const auto &[resource, location] : m_resources) {
-      if (location.has_value() && location.value() == path) {
-        return resource.mime_type();
-      }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      return resource->mime_type();
     }
 
     throw FileNotFound("Unknown path: " + path);
@@ -245,11 +237,10 @@ class HtmlServiceImpl final : public HtmlService {
 
     warmup();
 
-    for (const auto &[resource, location] : m_resources) {
-      if (location.has_value() && location.value() == path) {
-        resource.write_resource(out);
-        return;
-      }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      resource->write_resource(out);
+      return;
     }
 
     throw FileNotFound("Unknown path: " + path);
diff --git a/src/odr/internal/html/filesystem.cpp b/src/odr/internal/html/filesystem.cpp
index a08c54c26..839b6edf7 100644
--- a/src/odr/internal/html/filesystem.cpp
+++ b/src/odr/internal/html/filesystem.cpp
@@ -41,7 +41,8 @@ class HtmlServiceImpl final : public HtmlService {
   HtmlServiceImpl(Filesystem filesystem, HtmlConfig config,
                   const Logger &logger)
       : HtmlService(std::move(config), logger),
-        m_filesystem{std::move(filesystem)} {
+        m_filesystem{std::move(filesystem)},
+        m_resources{locate_filesystem_resources(this->config())} {
     m_views.emplace_back(
         std::make_shared<HtmlView>(*this, "files", 0, "files.html"));
   }
@@ -51,13 +52,17 @@ class HtmlServiceImpl final : public HtmlService {
   [[nodiscard]] const HtmlViews &list_views() const override { return m_views; }
 
   [[nodiscard]] bool exists(const std::string &path) const override {
-    return path == "files.html";
+    return path == "files.html" || resource_at(m_resources, path) != nullptr;
   }
 
   [[nodiscard]] std::string mimetype(const std::string &path) const override {
     if (path == "files.html") {
       return "text/html";
     }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      return resource->mime_type();
+    }
 
     throw FileNotFound("Unknown path: " + path);
   }
@@ -68,6 +73,11 @@ class HtmlServiceImpl final : public HtmlService {
       write_filesystem(writer);
       return;
     }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      resource->write_resource(out);
+      return;
+    }
 
     throw FileNotFound("Unknown path: " + path);
   }
@@ -170,6 +180,8 @@ class HtmlServiceImpl final : public HtmlService {
 
 protected:
   Filesystem m_filesystem;
+  /// The css this view links; empty of locations when the config embeds it.
+  HtmlResources m_resources;
 
   HtmlViews m_views;
 };
diff --git a/src/odr/internal/html/frontend.cpp b/src/odr/internal/html/frontend.cpp
index b24545c64..6f8a0aae1 100644
--- a/src/odr/internal/html/frontend.cpp
+++ b/src/odr/internal/html/frontend.cpp
@@ -7,6 +7,8 @@
 #include <odr/internal/html/html_service.hpp>
 #include <odr/internal/html/html_writer.hpp>
 
+#include <array>
+#include <span>
 #include <string>
 #include <string_view>
 
@@ -896,20 +898,30 @@ constexpr Asset spreadsheet_js_asset{HtmlResourceType::js, "text/javascript",
 constexpr Asset text_js_asset{HtmlResourceType::js, "text/javascript",
                               "text.js", text_js};
 
-/// Registers @p asset among the view's resources; `nullopt` to embed it.
-HtmlResourceLocation locate(const Asset &asset, const WritingState &state) {
+/// Appends @p asset to @p resources; `nullopt` to embed it.
+HtmlResourceLocation locate(const Asset &asset, const HtmlConfig &config,
+                            HtmlResources &resources) {
   const odr::HtmlResource resource = HtmlResource::create(
       asset.type, std::string(asset.mime_type), std::string(asset.name),
       std::string(asset.name),
       odr::File::from_memory(std::string(asset.content)), true, false, true);
-  HtmlResourceLocation location =
-      state.config().resource_locator(resource, state.config());
-  state.resources().emplace_back(resource, location);
+  HtmlResourceLocation location = config.resource_locator(resource, config);
+  resources.emplace_back(resource, location);
   return location;
 }
 
+HtmlResources locate_all(const std::span<const Asset> assets,
+                         const HtmlConfig &config) {
+  HtmlResources resources;
+  for (const Asset &asset : assets) {
+    locate(asset, config, resources);
+  }
+  return resources;
+}
+
 void write_style(const Asset &asset, const WritingState &state) {
-  if (const HtmlResourceLocation location = locate(asset, state);
+  if (const HtmlResourceLocation location =
+          locate(asset, state.config(), state.resources());
       location.has_value()) {
     state.out().write_header_style(escape_attribute(*location));
     return;
@@ -921,7 +933,8 @@ void write_style(const Asset &asset, const WritingState &state) {
 }
 
 void write_script(const Asset &asset, const WritingState &state) {
-  if (const HtmlResourceLocation location = locate(asset, state);
+  if (const HtmlResourceLocation location =
+          locate(asset, state.config(), state.resources());
       location.has_value()) {
     state.out().write_script(escape_attribute(*location));
     return;
@@ -970,4 +983,19 @@ void html::write_text_script(const WritingState &state) {
   write_script(text_js_asset, state);
 }
 
+HtmlResources html::locate_text_resources(const HtmlConfig &config) {
+  static constexpr std::array assets{text_css_asset, text_js_asset};
+  return locate_all(assets, config);
+}
+
+HtmlResources html::locate_filesystem_resources(const HtmlConfig &config) {
+  static constexpr std::array assets{filesystem_css_asset};
+  return locate_all(assets, config);
+}
+
+HtmlResources html::locate_media_resources(const HtmlConfig &config) {
+  static constexpr std::array assets{media_css_asset};
+  return locate_all(assets, config);
+}
+
 } // namespace odr::internal
diff --git a/src/odr/internal/html/frontend.hpp b/src/odr/internal/html/frontend.hpp
index d831e9af3..35f74a45a 100644
--- a/src/odr/internal/html/frontend.hpp
+++ b/src/odr/internal/html/frontend.hpp
@@ -1,5 +1,7 @@
 #pragma once
 
+#include <odr/html.hpp>
+
 namespace odr::internal::html {
 
 struct WritingState;
@@ -21,4 +23,11 @@ void write_document_script(const WritingState &state);
 void write_spreadsheet_script(const WritingState &state);
 void write_text_script(const WritingState &state);
 
+/// What the corresponding `write_*` calls would link, without writing anything:
+/// a service has to answer for these paths as well as for its views. Every
+/// entry is located `nullopt` when the config embeds them.
+HtmlResources locate_text_resources(const HtmlConfig &config);
+HtmlResources locate_filesystem_resources(const HtmlConfig &config);
+HtmlResources locate_media_resources(const HtmlConfig &config);
+
 } // namespace odr::internal::html
diff --git a/src/odr/internal/html/html_service.cpp b/src/odr/internal/html/html_service.cpp
index dfb192847..bcc44dfd3 100644
--- a/src/odr/internal/html/html_service.cpp
+++ b/src/odr/internal/html/html_service.cpp
@@ -76,3 +76,18 @@ void HtmlResource::write_resource(std::ostream &os) const {
 }
 
 } // namespace odr::internal::html
+
+namespace odr::internal {
+
+const odr::HtmlResource *html::resource_at(const HtmlResources &resources,
+                                           const std::string &path) {
+  for (const auto &[resource, location] : resources) {
+    if (location.has_value() && *location == path) {
+      return &resource;
+    }
+  }
+
+  return nullptr;
+}
+
+} // namespace odr::internal
diff --git a/src/odr/internal/html/html_service.hpp b/src/odr/internal/html/html_service.hpp
index c6c03f704..424d27b00 100644
--- a/src/odr/internal/html/html_service.hpp
+++ b/src/odr/internal/html/html_service.hpp
@@ -40,6 +40,11 @@ class HtmlView : public abstract::HtmlView {
   std::string m_path;
 };
 
+/// The resource a service serves at @p path, or `nullptr`. An embedded resource
+/// has no location and so is never served.
+const odr::HtmlResource *resource_at(const HtmlResources &resources,
+                                     const std::string &path);
+
 class HtmlResource : public abstract::HtmlResource {
 public:
   static odr::HtmlResource create(HtmlResourceType type, std::string mime_type,
diff --git a/src/odr/internal/html/media_file.cpp b/src/odr/internal/html/media_file.cpp
index 34d93516d..9cdd26919 100644
--- a/src/odr/internal/html/media_file.cpp
+++ b/src/odr/internal/html/media_file.cpp
@@ -93,7 +93,8 @@ class HtmlServiceImpl final : public HtmlService {
         m_view_path{m_element + ".html"},
         m_extension{source_extension(m_media_file)},
         m_source_path{m_element + "." + m_extension},
-        m_mime_type{mime_type_for(m_media_file.file_type(), m_extension)} {
+        m_mime_type{mime_type_for(m_media_file.file_type(), m_extension)},
+        m_resources{locate_media_resources(this->config())} {
     m_views.emplace_back(
         std::make_shared<HtmlView>(*this, m_element, 0, m_view_path));
   }
@@ -103,7 +104,8 @@ class HtmlServiceImpl final : public HtmlService {
   [[nodiscard]] const HtmlViews &list_views() const override { return m_views; }
 
   [[nodiscard]] bool exists(const std::string &path) const override {
-    return path == m_view_path || path == m_source_path;
+    return path == m_view_path || path == m_source_path ||
+           resource_at(m_resources, path) != nullptr;
   }
 
   [[nodiscard]] std::string mimetype(const std::string &path) const override {
@@ -113,6 +115,10 @@ class HtmlServiceImpl final : public HtmlService {
     if (path == m_source_path) {
       return m_mime_type;
     }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      return resource->mime_type();
+    }
 
     throw FileNotFound("Unknown path: " + path);
   }
@@ -127,6 +133,11 @@ class HtmlServiceImpl final : public HtmlService {
       m_media_file.file().pipe(out);
       return;
     }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      resource->write_resource(out);
+      return;
+    }
 
     throw FileNotFound("Unknown path: " + path);
   }
@@ -197,6 +208,8 @@ class HtmlServiceImpl final : public HtmlService {
   std::string m_extension;
   std::string m_source_path;
   std::string m_mime_type;
+  /// The css this view links; empty of locations when the config embeds it.
+  HtmlResources m_resources;
 
   HtmlViews m_views;
 };
diff --git a/src/odr/internal/html/text_file.cpp b/src/odr/internal/html/text_file.cpp
index 05e054d8c..0e9598682 100644
--- a/src/odr/internal/html/text_file.cpp
+++ b/src/odr/internal/html/text_file.cpp
@@ -21,7 +21,8 @@ class HtmlServiceImpl final : public HtmlService {
 public:
   HtmlServiceImpl(TextFile text_file, HtmlConfig config, const Logger &logger)
       : HtmlService(std::move(config), logger),
-        m_text_file{std::move(text_file)} {
+        m_text_file{std::move(text_file)},
+        m_resources{locate_text_resources(this->config())} {
     m_views.emplace_back(
         std::make_shared<HtmlView>(*this, "text", 0, "text.html"));
   }
@@ -31,13 +32,17 @@ class HtmlServiceImpl final : public HtmlService {
   [[nodiscard]] const HtmlViews &list_views() const override { return m_views; }
 
   [[nodiscard]] bool exists(const std::string &path) const override {
-    return path == "text.html";
+    return path == "text.html" || resource_at(m_resources, path) != nullptr;
   }
 
   [[nodiscard]] std::string mimetype(const std::string &path) const override {
     if (path == "text.html") {
       return "text/html";
     }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      return resource->mime_type();
+    }
 
     throw FileNotFound("Unknown path: " + path);
   }
@@ -48,6 +53,11 @@ class HtmlServiceImpl final : public HtmlService {
       write_text(writer);
       return;
     }
+    if (const odr::HtmlResource *resource = resource_at(m_resources, path);
+        resource != nullptr) {
+      resource->write_resource(out);
+      return;
+    }
 
     throw FileNotFound("Unknown path: " + path);
   }
@@ -149,6 +159,9 @@ class HtmlServiceImpl final : public HtmlService {
 
 protected:
   TextFile m_text_file;
+  /// The css and js this view links; empty of locations when the config embeds
+  /// them.
+  HtmlResources m_resources;
 
   HtmlViews m_views;
 };
diff --git a/test/src/html_test.cpp b/test/src/html_test.cpp
index ccf5c0d10..ae3231177 100644
--- a/test/src/html_test.cpp
+++ b/test/src/html_test.cpp
@@ -1,5 +1,6 @@
 #include <filesystem>
 #include <fstream>
+#include <sstream>
 
 #include <odr/html.hpp>
 
@@ -13,6 +14,50 @@ using namespace odr;
 using namespace odr::internal;
 using namespace odr::test;
 
+// A linked stylesheet is of no use to a host serving the service over http if
+// the service cannot answer for the path the markup names.
+TEST(html, linked_resources_are_served) {
+  const auto logger = Logger::create_stdio("odr-test", LogLevel::verbose);
+
+  const std::string cache_path =
+      (std::filesystem::current_path() / "cache").string();
+
+  const auto check = [&](const DecodedFile &file, const std::string &view) {
+    HtmlConfig config;
+    config.embed_shipped_resources = false;
+
+    const HtmlService service = html::translate(file, cache_path, config);
+
+    std::ostringstream out;
+    const HtmlResources resources = service.list_views().at(0).write_html(out);
+    ASSERT_EQ(service.list_views().at(0).path(), view);
+
+    std::size_t linked = 0;
+    for (const auto &[resource, location] : resources) {
+      if (!resource.is_shipped()) {
+        continue;
+      }
+      ASSERT_TRUE(location.has_value()) << resource.name();
+      ++linked;
+
+      EXPECT_TRUE(service.exists(*location)) << *location;
+      EXPECT_EQ(service.mimetype(*location), resource.mime_type());
+
+      std::ostringstream served;
+      service.write(*location, served);
+      EXPECT_FALSE(served.str().empty()) << *location;
+    }
+    EXPECT_GT(linked, 0);
+  };
+
+  check(DecodedFile(TestData::test_file_path("odr-public/odt/about.odt"),
+                    FileType::zip, logger),
+        "files.html");
+  check(DecodedFile(TestData::test_file_path("odr-public/txt/lorem ipsum.txt"),
+                    logger),
+        "text.html");
+}
+
 // The one archive the reference-output suite renders has no directory in it.
 TEST(html, archive_listing) {
   const auto logger = Logger::create_stdio("odr-test", LogLevel::verbose);