ΘΕΣΜΙΚΗ ΕΠΑΝΙΔΡΥΣΗ · Παραδοτέα σχεδιασμού 8–13

Σχεδιαστικό Σύστημα & Προδιαγραφή Ηλεκτρονικής Εφημερίδας

Ταυτότητα. Σοβαρή πολιτική / θεσμική εφημερίδα με έμφαση στην τεκμηρίωση και τη δημόσια λογοδοσία. Το τελικό προϊόν είναι κανονικό πολυσέλιδο PDF A4 με πραγματικό (επιλέξιμο) κείμενο, που διαβάζεται μέσω PDF.js και τυπώνεται σε υψηλή ποιότητα. Δεν είναι blog ούτε newsletter.

Αρχιτεκτονική στόχος: CONTENT → EDITORIAL ENGINE → HTML (A4 paged) → PDF → PDF.js → ΑΝΑΓΝΩΣΤΗΣ. Το σύστημα είναι παραμετρικό template: το engine λαμβάνει δομημένο περιεχόμενο (τίτλο, υπότιτλο, lead, body, author, category, images, captions, quotes, references) και παράγει σελίδες χωρίς επανασχεδιασμό.

0 · Αρχεία & ροή παραγωγής

Αρχείο	Ρόλος
`css/fonts.css`	Ενσωματωμένες γραμματοσειρές GFS σε `.ttf` (ώστε ο Chrome να τις βάζει στο PDF ως CID TrueType — πραγματικό κείμενο, όχι Type 3 / όχι raster).
`css/newspaper.css`	Όλο το design system: tokens, grid, τυπογραφία, components, κανόνες `@page` / print.
`issue-001.html`	Μακέτα φύλλου 001 — 8 σελίδες A4 (τα 7 templates + το δισέλιδο ΦΑΚΕΛΟΣ). Placeholder περιεχόμενο.
`build.sh`	Headless Chrome → `dist/thesmiki-epanidrisi-001.pdf`. Επαληθεύει επιλέξιμο κείμενο & tagging.
`index.html`	Είσοδος αναγνώστη → ανοίγει το PDF στον `../pdfjs/web/viewer.html`.

Εντολή παραγωγής: ./build.sh [source.html] [out.pdf]. Ο editorial engine αργότερα παράγει το issue-NNN.html από δεδομένα και καλεί το ίδιο build.sh.

8 · Typography specification

Οικογένειες

Ρόλος	Γραμματοσειρά	Λόγος
Masthead	GFS Bodoni Bold	Didone υψηλής αντίθεσης· ισχυρή, αναγνωρίσιμη επικεφαλίδα εφημερίδας.
Headlines / decks / pull quotes	GFS Didot (Regular/Bold/Italic)	Κλασική εκδοτική αίσθηση, εξαιρετικό ελληνικό σχέδιο.
Σώμα κειμένου / lead	GFS Artemisia	Ελληνικό book serif σχεδιασμένο για συνεχή ανάγνωση· άνετο ακόμη και σε browser zoom.
Kicker / metadata / captions / infographics / folio	GFS Neohellenic	Humanist sans· καθαρός διαχωρισμός από την ύλη.
Έγγραφα / τεκμήρια	Monospace (Liberation/DejaVu)	Οπτική «μηχανής» για αναπαραγωγή εγγράφων.

Όλες οι οικογένειες έχουν πλήρη υποστήριξη τόνων και πολυτονικού. Fallbacks: Gentium Plus, Noto Serif, Liberation Sans, Georgia.

Κλίμακα (βάση 10pt σώμα εκτύπωσης, modular ≈ 1.24)

Στυλ	Μέγεθος	Χρήση	Class
Masthead	33pt (μία γραμμή)	Τίτλος εφημερίδας	`.masthead__title`
Headline XL	40pt	Κύριο θέμα πρωτοσέλιδου	`.headline--xl`
Headline L	27pt	Σημαντικά άρθρα, κεφαλίδα ΦΑΚΕΛΟΥ	`.headline--l`
Headline M	18pt	Κανονικά άρθρα	`.headline--m`
Headline S	13pt	Μικρές ειδήσεις, briefs	`.headline--s`
Lead	11.5pt / 1.42	Εισαγωγική παράγραφος	`.lead`
Body	9.8pt / 1.5	Σώμα κειμένου	`.body`
Caption	8pt	Λεζάντες	`.figure__caption`
Metadata	7.4pt	Συντάκτης, ημερομηνία, κατηγορία, σελίδα	`.byline`, `.kicker`

ΘΕΣΜΙΚΗ ΕΠΑΝΙΔΡΥΣΗ

Headline M — Ἡ λογοδοσία ως προϋπόθεση

Deck / υπότιτλος σε πλάγια GFS Didot, 2–4 γραμμές.

Body σε GFS Artemisia. Ο έλεγχος της αιτιολογίας είναι ο πυρήνας του ακυρωτικού ελέγχου· η αναγνωσιμότητα διατηρείται και σε μικρό zoom μέσα σε PDF.js.

Του Α. Παπαδοπούλου · Metadata — 8 Νοεμβρίου 2026

Κανόνες

Στοίχιση σώματος: αριστερή (ragged right)· hyphens:none — ο ελληνικός συλλαβισμός δεν είναι αξιόπιστος στο PDF.
Παράγραφοι: πρώτη χωρίς εσοχή (.no-indent), επόμενες με εσοχή 4mm.
orphans:3; widows:3· μεσότιτλοι & τίτλοι break-after:avoid.
Αριθμοί: font-variant-numeric: tabular-nums σε πίνακες.

9 · Grid specification

Μορφή: A4 portrait 210 × 297 mm. Περιθώρια: πάνω 14 · κάτω 15 · έξω 15 · ράχη 18 mm (ασύμμετρα, εναλλάξ ανά σελίδα: .sheet--left / .sheet--right).

Βάση: 12-στηλο grid = 3 βασικές συντακτικές στήλες (4+4+4), gutter 4.5 mm, κάθετος ρυθμός 4.4 mm.

col-4 · 1/3 col-4 col-4 col-8 · 2/3 (2+1) col-4 col-6 · μισή col-6 col-12 · πλήρες πλάτος (άρθρο ή φωτογραφία)

Διάταξη	Helpers
1 μεγάλη στήλη	`.col-12` + `.text-cols-2`/`-3` για ροή
2 στήλες	`.col-8` + `.col-4` ή `.col-6` × 2
3 στήλες	3 × `.col-4`
2 + 1	`.col-8` (κείμενο) + `.col-4` (aside)
Πλήρες πλάτος	`.col-12` (άρθρο, hero, infographic)

Διαχωριστικά στηλών: .rule-r/.rule-l (τρίχινη γραμμή) με .pad-r/.pad-l. Επαρκής λευκός χώρος — οι σελίδες δεν υπερφορτώνονται.

10 · Component specification

Modular, επαναχρησιμοποιήσιμα. Κάθε component είναι μία class στο newspaper.css.

Component	Class	Σημειώσεις
Masthead + folio line	`.masthead`, `.folio-line`	Φύλλο · ημ/νία · domain. Χώρος για QR.
Kicker / κατηγορία	`.kicker`	Accent γραμμή + κεφαλαία.
Headline	`.headline--xl/l/m/s`	GFS Didot Bold, `text-wrap:balance`.
Deck / υπότιτλος	`.deck`	Πλάγια, ≤ 62ch.
Byline / metadata	`.byline`	Συντάκτης · ημ/νία · ενότητα.
Lead (με dropcap)	`.lead`, `.dropcap`	Πρωτόγραμμα σε accent.
Body	`.body`, `.text-cols-2/3`	Ροή σε 2–3 στήλες.
Μεσότιτλος	`.subhead`, `.subhead--accent`	`break-after:avoid`.
Pull quote	`.pullquote` + `cite`	GFS Didot Italic· accent πάνω κανόνας.
Αριθμημένα στοιχεία	`ol.marker-accent`	Τετράγωνοι accent αριθμοί.
Information box	`.infobox`, `.infobox--accent`	Πλακίδιο με ετικέτα.
Πίνακας δεδομένων	`table.datatable`	`caption`, `td.num`, `.accent`.
Γράφημα (ραβδόγραμμα)	`.bars` / `.illus`	CSS-only, χωρίς raster.
Figure	`.figure` + `__frame` + `__caption` + `__credit`	Πάντα λεζάντα & πηγή. Αναλογίες `.ar-*`.
Brief (δευτ. θέμα)	`.brief` (__cat/__title/__teaser/__jump)	Πρωτοσέλιδο· 3–5 τεμ.
Παραπομπή σελίδας	`.jump-banner`	«Ο ΦΑΚΕΛΟΣ ΣΤΙΣ ΣΕΛΙΔΕΣ 4–5».
ΦΑΚΕΛΟΣ — σημαία	`.dossier-flag`	ΕΡΕΥΝΑ · Ο ΦΑΚΕΛΟΣ.
ΦΑΚΕΛΟΣ — πλαίσια	`.dbox--doc/law/data/q/a`	ΤΟ ΕΓΓΡΑΦΟ · ΤΙ ΠΡΟΒΛΕΠΕΙ Ο ΝΟΜΟΣ · ΤΑ ΣΤΟΙΧΕΙΑ · ΤΟ ΕΡΩΤΗΜΑ · Η ΑΠΑΝΤΗΣΗ ΤΗΣ ΔΙΟΙΚΗΣΗΣ.
Χρονολόγιο	`.timeline` (__date/__text)	Κάθετη γραμμή με accent κόμβους.
Πρόσωπα / φορείς	`.actors`	Όνομα + ιδιότητα.
Αναπαραγωγή εγγράφου	`.document` (__stamp/__head/__caption), `.redacted`	Απόκρυψη δεδομένων τρίτων.
Κεφαλίδα Απόψεων	`.opinion-tag`, `.opinion-head`, `.opinion-portrait`, `.opinion-bio`	Καθαρός διαχωρισμός από ειδησεογραφία.
Footnotes / references	`.footnotes`, `.ref-link`	Εσωτ. & εξωτ. σύνδεσμοι.
Running header	`.run-head`	«ΘΕΣΜΙΚΗ ΕΠΑΝΙΔΡΥΣΗ \| ΚΑΤΗΓΟΡΙΑ» — στη ροή (σταθερή απόδοση σε κάθε μηχανή).
Footer / folio	`@page @bottom-left/@bottom-right`	domain + ευδιάκριτος αριθμός σελίδας.
QR	`.qr`, `.qr--sm`, `.qr-caption`	Placeholder· αντικαθίσταται από πραγματικό SVG.
Colophon / ευρετήριο	`.colophon`, `.index-list`	Τελευταία σελίδα.

Σταθερές ενότητες

ΠΟΛΙΤΙΚΗ · ΘΕΣΜΟΙ · ΔΙΚΑΙΟΣΥΝΗ · ΟΙΚΟΝΟΜΙΑ · ΚΟΙΝΩΝΙΑ · ΕΡΕΥΝΑ · ΑΠΟΨΕΙΣ · ΔΙΕΘΝΗ · ΙΣΤΟΡΙΑ / ΑΡΧΕΙΟ. Δηλώνονται με .sec-* στο .sheet και εμφανίζονται στο running header. Το accent παραμένει σταθερό — αλλάζει μόνο η ετικέτα.

11 · Χρωματική παλέτα

Paper · #fbfaf7

Paper 2 (πλακίδια) · #f2efe8

Ink (κείμενο) · #14140f

Ink soft · #3a3a34

Ανθρακί (metadata/γραμμές) · #5b5b53

Hairline · #cfc9bd

Accent · #b0122b

Accent ink (κείμενο) · #7d0c1e

Accent tint · #f6e7e5

Χρήση accent με φειδώ: κανόνες, κατηγορίες, αριθμοί σελίδων, μικρά editorial στοιχεία, επιλεγμένες λέξεις, κόμβοι χρονολογίου, πλαίσιο δεδομένων. Αποφεύγονται: gradients, neon, σκιές, effects, αισθητική εφαρμογής κινητού. Όλα τα tokens ζουν στο :root του newspaper.css — η αλλαγή accent είναι μονόγραμμη.

12 · Κανόνες χρήσης φωτογραφιών

Δημοσιογραφική, όχι διακοσμητική χρήση. Κάθε εικόνα φέρει λεζάντα (.figure__caption) και πηγή (.figure__credit).
Layouts & ενδεικτικά ύψη (σε πλάτος στήλης): hero .ar-hero 58mm · λωρίδα πλήρους πλάτους .ar-band 40mm · φωτό στήλης .ar-wide 52mm · portrait .ar-portrait 58mm · document .document · infographic .illus · editorial illustration → .figure__frame.
Τα ύψη είναι σταθερά → ντετερμινιστική σελιδοποίηση για τον engine.
Επεξεργασία: ουδέτερη· τα portraits αρθρογράφων σε grayscale για διαχωρισμό από την ειδησεογραφία.
Χωρίς πλαίσια-σκιές· λεπτό hairline περίγραμμα. Το placeholder .ph[data-label] δείχνει τη θέση πριν μπει το πραγματικό αρχείο.
Ανάλυση εξαγωγής: 300 dpi για τύπωμα· τα raster ενσωματώνονται μία φορά, με λογικό μέγεθος αρχείου.

13 · PDF-specific specification

Παραγωγή: google-chrome --headless=new --print-to-pdf με --export-tagged-pdf και --generate-pdf-document-outline.

Απαίτηση	Πώς καλύπτεται	Έλεγχος
Selectable text / copy-paste / full-text search	Γραμματοσειρές ενσωματωμένες ως CID TrueType subsets με ToUnicode (όχι Type 3, όχι raster)	`pdftotext` → ~21k χαρακτ.· `pdffonts` → όλες «TrueType / Identity-H / emb yes»
Σωστή απόδοση ελληνικών & τόνων	GFS faces με πλήρη κάλυψη· TTF μετά από `fontforge`	Οπτικός έλεγχος στα renders
Bookmarks / table of contents	`--generate-pdf-document-outline` από τα `h1–h6`	`pdftk … dump_data` → BookmarkTitle entries
Internal links μεταξύ σελίδων	`<a href="#p-…">` → GoTo annotations	`/Subtype /Link` με `/Dest`
Εξωτερικοί σύνδεσμοι	`https:` / `mailto:` → URI annotations	folio line, footnotes, σελ. Απόψεων, colophon
Tagged (accessibility / δομή)	`--export-tagged-pdf`	`pdfinfo` → `Tagged: yes`
Λογικό μέγεθος αρχείου	Subsetting· CSS-only γραφικά· placeholders	8 σελ. ≈ 0.3 MB
Ακριβές A4	`@page{ size:A4 portrait }`	`pdfinfo` → 594.96 × 841.92 pts
Όχι raster σελίδες	Καθαρό DOM· καμία εικόνα σελίδας	Το κείμενο εξάγεται 1:1

PDF.js — εμπειρία ανάγνωσης

Ανοίγει από press/index.html → ../pdfjs/web/viewer.html?file=….
Λειτουργεί σε desktop / laptop / tablet / κινητό· τίτλοι & masthead αναγνωρίσιμα σε μικρό zoom· χωρίς υπερβολικά μικρό body text (≥ 9.8pt).
Οι αριθμοί σελίδων (@bottom-right, GFS Neohellenic Bold 9pt) είναι ευδιάκριτοι μέσα στον viewer.
Το outline του PDF τροφοδοτεί το πάνελ σελιδοδεικτών του PDF.js.

Σημείωση παραγωγής. Το --generate-pdf-document-outline συλλέγει όλες τις επικεφαλίδες. Ο engine πρέπει είτε να περιορίζει τα h* στα άρθρα, είτε να παράγει ρητό outline (π.χ. μέσω PDF.js API / qpdf) για καθαρό table of contents.

Παραδοτέα 1–7 · Templates σελίδων

Πλήρη παραδείγματα στο issue-001.html / dist/…pdf:

Πρωτοσέλιδο — masthead, folio line, κεντρικό θέμα (kicker → headline XL → deck → hero → intro → jump-banner), 4 briefs, QR.
Τυπική εσωτερική σελίδα ειδήσεων — running header, headline L, lead, body σε 2 στήλες, πίνακας, ραβδόγραμμα, infobox.
Σελίδα μεγάλου άρθρου — full-width hero, dropcap lead, 2-στηλο body, μεσότιτλοι, pull quote, ol.marker-accent, footnotes, aside με infoboxes.
+ 5. Δισέλιδο «ΦΑΚΕΛΟΣ» — .dossier-flag, headline XL, χρονολόγιο, πρόσωπα/φορείς, νομικές πηγές, τα 5 πλαίσια .dbox, infographic, pull quote.
6. Σελίδα Απόψεων — .opinion-tag, portrait + όνομα + ιδιότητα + βιογραφικό, πλάγιοι τίτλοι, επιστολές αναγνωστών, box υποβολής.
7. Σελίδα εγγράφων / τεκμηρίων — .document με stamp & redaction, λεζάντα & πηγή, ευρετήριο εγγράφων, QR, δικαίωμα απάντησης.
Τελευταία σελίδα — reprise masthead, περιεχόμενα με εσωτ. links, «στο επόμενο φύλλο», QR, colophon (έκδοση, διόρθωση, άδεια, τεχνική σημείωση).

ΘΕΣΜΙΚΗ ΕΠΑΝΙΔΡΥΣΗ — σχεδιαστικό σύστημα v1 · Οι γραμματοσειρές GFS διανέμονται υπό SIL OFL 1.1 (fonts/OFL.txt).