[PHP-WEBMASTER] [web-news] master: Improve markup for `article.php`

[Tim Düsterhus via Derick Rethans]

Author: Tim Düsterhus (TimWolla)
Committer: Derick Rethans (derickr)
Date: 2026-10-06T11:59:53+01:00

Commit: 
https://github.com/php/web-news/commit/be8ff35715c6550b452844291c106c15278d7126
Raw diff: 
https://github.com/php/web-news/commit/be8ff35715c6550b452844291c106c15278d7126.diff

Improve markup for `article.php`

This stops wrapping everything in `<blockquote>` and `<pre>`. Instead the email
now is an `<article>` with the email body being a plain `<div>`.

Changed paths:
  M  article.php
  M  style.css


Diff:

diff --git a/article.php b/article.php
index 902d02b..94e58e3 100644
--- a/article.php
+++ b/article.php
@@ -94,9 +94,9 @@
 echo '</nav>';
 echo '<section class="content">';
 
-echo '<h1>' . format_subject($mail['headers']['subject'], 'utf-8') . "</h1>\n";
-
-echo "  <blockquote>\n";
+echo " <article>\n";
+echo '  <h1>' . format_subject($mail['headers']['subject'], 'utf-8') . 
"</h1>\n";
+echo "  <header>\n";
 echo '   <table class="standard">' . "\n";
 # from
 echo '    <tr class="vcard">' . "\n";
@@ -140,10 +140,9 @@
 echo '     <td class="headervalue" colspan="3">Send a blank email to <a 
href="mailto:' . clean($request_address) . '">' . clean($request_address)  . 
"</a> to get a copy of this message</td>\n";
 echo "    </tr>\n";
 echo "   </table>\n";
-echo "  </blockquote>\n";
-echo "  <blockquote>\n";
-$class = $mail['flowed'] ? ' class="flowed"' : '';
-echo "   <pre$class>\n";
+echo "  </header>\n";
+$class = $mail['flowed'] ? 'flowed' : '';
+echo "  <div class=\"emailText $class\">\n";
 
 /*
  * If there was no text part of the message, see what we can do about creating
@@ -387,20 +386,20 @@
     }
 }
 
-echo "   </pre>\n";
-echo "  </blockquote>\n";
+echo "  </div>\n";
+echo " </article>\n";
 
 try {
     $overview = $nntpClient->getThreadOverview($group, $article);
 
     $threads = new \PhpWeb\ThreadTree($overview['articles']);
     ?>
-      <blockquote>
+      <nav>
         <h2>
           Thread (<?= sprintf("%d message%s", $count = $threads->count(), 
$count > 1 ? 's' : '') ?>)
         </h2>
         <?php $threads->printFullThread($group, $article, charset: 'utf8'); ?>
-      </blockquote>
+      </nav>
     <?php
 } catch (\Throwable $t) {
     // We don't care if there's no thread. (There should be, though.)
diff --git a/style.css b/style.css
index 4db6602..afd6dd2 100644
--- a/style.css
+++ b/style.css
@@ -252,13 +252,6 @@ h1:after {
     border-bottom: 1px dotted;
 }
 
-pre {
-    font-family: "Fira Mono", monospace;
-    font-size: 14px;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
 .footer {
     color: #F2F2F2;
     max-width: 1440px;
@@ -370,16 +363,25 @@ table.standard th.subr {
 .quote3 { color: #a36008; }
 .quote0 { color: #909; }
 
-pre.flowed {
+.emailText {
+    font-size: 14px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: "Fira Mono", monospace;
+}
+
+.emailText.flowed {
     max-width: 100ch;
     font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif;
     font-size: 16px;
 }
-pre.flowed code, pre.flowed pre {
+
+.emailText code, .emailText pre {
+    font-family: "Fira Mono", monospace;
     font-weight: 700;
     color: #369;
 }
-pre.flowed pre {
+.emailText pre {
     background: rgba(0,0,0,0.05);
     border: 1px solid rgba(0,0,0,0.2);
     padding: 0.5rem;
@@ -494,7 +496,7 @@ form.subscription-form {
         display: none;
     }
 
-    blockquote {
+    blockquote, article.email {
         margin: 16px;
     }
 }