/* ============================================================================ YUUJOU — TIPOGRAFIA DEI TESTI (2026-08-14) Il testo GIUSTIFICATO e' una scelta di Alain e resta: e' la composizione della stampa da cinque secoli, ed e' per questo che l'occhio la riconosce come "professionale". Il problema del web non e' il giustificato in se', e' che il browser di suo NON SILLABA: per pareggiare i due margini puo' solo dilatare gli spazi fra le parole, e nascono i "fiumi" bianchi che serpeggiano nella colonna. Su un telefono, con ~38 caratteri per riga, diventano voragini. Qui si accende la sillabazione automatica, che e' esattamente cio' che rende bello il giustificato dei libri. Funziona perche' le nostre pagine dichiarano la lingua giusta (, verificato): il browser usa il dizionario di quella lingua per sapere dove spezzare. Supporto: tutti i browser dal settembre 2023. Per il GIAPPONESE la sillabazione non esiste — si va a capo quasi ovunque. Al suo posto valgono le regole di KINSOKU SHORI (禁則処理): niente punteggiatura, parentesi chiuse o piccoli kana (ゃゅょっ) a inizio riga. 'line-break: strict' e' il livello piu' rigoroso, quello dei testi curati. NB: questo foglio va caricato PRIMA di yj_dark.css, che deve poter sovrascrivere i colori quando il tema scuro e' acceso. ========================================================================== */ /* --- i quattro punti dove vive il testo lungo del sito ------------------- */ .wall_post, .comment_text .full_comment, .wrapper-one-article .one-article .blogs_post_content, .cham-content-style-10 p { text-align: justify; /* si allargano solo gli SPAZI, mai le lettere: stirare i glifi e' il difetto che rende un testo "tirato" e stanca l'occhio */ text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; /* il trattino non spezza parole corte e lascia almeno tre lettere da entrambe le parti: senza questo limite si ottengono spezzature goffe tipo "a-mico". Dove non supportato (Firefox) la sillabazione resta, solo un po' meno raffinata. */ -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 6 3 3; /* kinsoku giapponese, innocuo sul testo latino */ line-break: strict; /* un indirizzo lunghissimo va spezzato invece di sfondare la colonna, ma senza spezzare le parole normali (che ci pensa la sillabazione) */ overflow-wrap: break-word; word-break: normal; } /* --- interfaccia giapponese: via i trattini ------------------------------ */ html[lang="ja"] .wall_post, html[lang="ja"] .comment_text .full_comment, html[lang="ja"] .wrapper-one-article .one-article .blogs_post_content, html[lang="ja"] .cham-content-style-10 p { -webkit-hyphens: none; hyphens: none; } /* --- il nero ------------------------------------------------------------- #000 su bianco fa 21:1, il massimo possibile: sembra un pregio ma in lettura lunga i bordi delle lettere "vibrano" sul fondo e affaticano. #1c1c1c resta a ~16:1, cioe' ampiamente sopra il livello AAA delle linee guida di accessibilita', e si legge senza abbagliare. */ .wall_post { color: #1c1c1c; } /* --- il corpo del testo lungo -------------------------------------------- Misurato il 14/8: Literata ha l"altezza-x al 95%% di Arial ed e" l"8%% piu" stretta, quindi a parita" di px il testo RISULTA piu" piccolo — non e" un"impressione (Alain: "forse troppo piccoli"). Si compensa portando il corpo da 15 a 17px, con interlinea 28px (1,65 del corpo: dentro l"intervallo consigliato 1,5-1,7 per il testo continuo). L"INTERFACCIA non si tocca: Inter ha la stessa altezza-x di Arial, e ingrandirla farebbe uscire le voci dai menu. */ .wall_post, .wall_item_comment, .comment_text .full_comment, .wrapper-one-article .one-article .blogs_post_content { font-size: 18px; line-height: 30px; } /* =========================================================================== I CARATTERI (2026-08-14) Prima di oggi il sito era interamente in Arial: "Montserrat" era dichiarato sui titoli ma non e' mai stato caricato (nessun @font-face, nessun file), quindi cadeva su Arial anche quello. Qui non si sostituisce una scelta: si colma un vuoto. Due famiglie, con compiti diversi: - LITERATA per il testo lungo (post, articoli, commenti). E' una serif disegnata da TypeTogether per la lettura prolungata SU SCHERMO: ha l'occhio grande e i tratti robusti, al contrario dei Garamond da stampa che a 16px si sgranano. Da' al sito il tono editoriale che gli si addice. - INTER per l'interfaccia (menu, pulsanti, nomi, schede): disegnata per le UI, forme aperte e nitide ai corpi piccoli. GIAPPONESE: nessun font scaricato, ed e' una scelta tecnica precisa. Un font CJK completo pesa 4-8 MB: insostenibile. Si usa lo stack dei font di sistema, che su iOS/macOS (Hiragino), Windows (Yu Gothic/Mincho) e Android (Noto CJK) e' di ottima qualita' e gia' installato. Per il testo lungo si tenta prima un MINCHO (il serif giapponese, coerente con Literata) e si ripiega sul gothic. PESO: 131 KB per un lettore italiano — un solo file per famiglia, perche' sono font VARIABILI (tutti i pesi in un file). I sottoinsiemi non latini vengono scaricati solo se in pagina compare un carattere che li richiede (unicode-range). Ospitati da noi: nessuna richiesta a Google dal browser dei visitatori. ========================================================================== */ @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; /* file VARIABILE: un solo scaricamento per tutti i pesi */ font-display: swap; /* il testo si legge subito col font di sistema, poi si sostituisce */ src: url('../fonts/yj/literata-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; /* file VARIABILE: un solo scaricamento per tutti i pesi */ font-display: swap; /* il testo si legge subito col font di sistema, poi si sostituisce */ src: url('../fonts/yj/literata-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; /* file VARIABILE: un solo scaricamento per tutti i pesi */ font-display: swap; /* il testo si legge subito col font di sistema, poi si sostituisce */ src: url('../fonts/yj/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; /* file VARIABILE: un solo scaricamento per tutti i pesi */ font-display: swap; /* il testo si legge subito col font di sistema, poi si sostituisce */ src: url('../fonts/yj/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- interfaccia ---------------------------------------------------------- */ body, input, textarea, select, button, .btn, .form-control { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; } /* --- testo lungo: la parte che si legge davvero --------------------------- */ .wall_post, .wall_item_comment, .comment_text .full_comment, .wrapper-one-article .one-article .blogs_post_content, .cham-content-style-10 p { font-family: 'Literata', Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif; } /* --- i titoli ------------------------------------------------------------ ⚠️ 14/8: i selettori che avevo scritto (.blogs_post_title, .one_blog_title) NON ESISTONO in questo tema — i titoli restavano in Arial. Quelli veri usano tutti .cham-heading, e vanno distinti per CONTESTO: - il titolo di un ARTICOLO e' contenuto -> serif, come il testo che segue; - «Sfoglia i blog» e simili sono INTERFACCIA -> sans, come i menu. */ .cham-heading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; } .wrapper-one-article h2.cham-heading, .wrap_static_page.wrapper-one-article h2 { font-family: 'Literata', Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-weight: 600; letter-spacing: -0.01em; /* i corpi grandi in serif stanno meglio un filo piu' stretti */ } /* --- le icone: NON si toccano --------------------------------------------- ⚠️ 14/8/2026: qui c"era una regola che dava "font-family: inherit" a .glyphicon e a tutte le classi icon_*, con l"idea di proteggerle. Faceva l"opposto: le privava del loro font e l"icona della chat era sparita (segnalato da Alain). Le icone hanno gia" il loro font dichiarato dove serve: il modo di proteggerle e" NON scrivere regole su di loro. Resta solo la blindatura di FontAwesome, che eredita dal body. */ .fa { font-family: FontAwesome !important; } /* --- cirillico: scaricato SOLO se in pagina compare un carattere cirillico (unicode-range). Per un lettore italiano e' come se non esistesse. --- */ @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/yj/literata-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/yj/literata-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/yj/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/yj/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* --- gli altri titoli che sono CONTENUTO ---------------------------------- Trovati ispezionando il DOM il 14/8 (non hanno classi proprie, si prendono dal contenitore): - .cham-post-text = il titolo dell'articolo nelle schede dell'elenco blog; - .blogs_post_content = i sottotitoli scritti dall'autore DENTRO l'articolo. Entrambi sono testo dell'autore, quindi parlano con la voce del testo. */ .cham-post-text h1, .cham-post-text h2, .cham-post-text h3, .cham-post-text h4, .blogs_post_content h1, .blogs_post_content h2, .blogs_post_content h3, .blogs_post_content h4, .blogs_post_content h5, .blogs_post_content h6 { font-family: 'Literata', Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; } /* --- regola generale per i titoli ----------------------------------------- Invece di rincorrere ogni selettore rimasto in Arial (ce n'erano sparsi in modali, schede, viste alternative dell'elenco blog), si dichiara che TUTTI i titoli parlano con la voce dell'interfaccia. Le regole qui sopra, che danno Literata ai titoli di CONTENUTO, restano valide perche' hanno selettori piu' specifici e quindi vincono. */ h1, h2, h3, h4, h5, h6, .modal-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; } /* i titoli di contenuto: ridichiarati DOPO la regola generale, cosi' vincono a prescindere dall'ordine di specificita' */ .wrapper-one-article h2.cham-heading, .cham-post-text h1, .cham-post-text h2, .cham-post-text h3, .cham-post-text h4, .cham-blog-style-2 h1, .cham-blog-style-2 h2, .cham-blog-style-2 h3, .blogs_post_content h1, .blogs_post_content h2, .blogs_post_content h3, .blogs_post_content h4, .blogs_post_content h5, .blogs_post_content h6 { font-family: 'Literata', Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; } /* =========================================================================== IL GIAPPONESE PIU' GRANDE DEL LATINO (2026-08-14) Alain: «l'unica cosa che trovo difficile da leggere è il giapponese». Ha ragione, e la causa e' nella natura dei segni: un kanji puo' contenere venti tratti dentro lo stesso quadratino in cui una "o" ne ha uno. Alla stessa dimensione dichiarata il giapponese risulta quindi molto piu' fitto e stanca prima. Nella composizione giapponese si compensa da sempre ingrandendo il CJK rispetto al latino. Qui NON si ingrandisce tutto il testo: si dichiarano due famiglie che puntano ai font di sistema giapponesi (nessuno scaricamento) con 'size-adjust: 112%' e 'unicode-range' limitato ai soli caratteri CJK. Risultato: il latino resta identico, il giapponese cresce del 12%. Se un sistema non ha nessuno dei font elencati, il blocco fallisce e si passa al successivo nello stack: nessun danno. ========================================================================== */ @font-face { font-family: 'YJ JP'; src: local("Hiragino Sans"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN"), local("Yu Gothic Medium"), local("YuGothic"), local("Noto Sans JP"), local("Noto Sans CJK JP"), local("Meiryo"), local("MS PGothic"); size-adjust: 106%; unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+3200-33FF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } @font-face { font-family: 'YJ JP Serif'; src: local("Hiragino Mincho ProN"), local("HiraMinProN-W3"), local("Yu Mincho"), local("YuMincho"), local("Noto Serif JP"), local("Noto Serif CJK JP"), local("MS PMincho"), local("Hiragino Sans"), local("Yu Gothic"); size-adjust: 106%; unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+3200-33FF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } /* le due famiglie entrano negli stack SUBITO DOPO il font latino: il browser usa il latino per le lettere e queste per i caratteri giapponesi */ body, input, textarea, select, button, .btn, .form-control, h1, h2, h3, h4, h5, h6, .modal-title, .cham-heading { font-family: 'Inter', 'YJ JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; } .wall_post, .wall_item_comment, .comment_text .full_comment, .wrapper-one-article .one-article .blogs_post_content, .cham-content-style-10 p, .wrapper-one-article h2.cham-heading, .cham-post-text h1, .cham-post-text h2, .cham-post-text h3, .cham-post-text h4, .cham-blog-style-2 h1, .cham-blog-style-2 h2, .cham-blog-style-2 h3, .blogs_post_content h1, .blogs_post_content h2, .blogs_post_content h3, .blogs_post_content h4, .blogs_post_content h5, .blogs_post_content h6 { font-family: 'Literata', 'YJ JP Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif; } /* --- interlinea per il giapponese ---------------------------------------- Il testo giapponese vuole piu' aria del latino: i kanji riempiono tutto il quadratino, senza le "valli" fra le lettere che nell'alfabeto latino fanno respirare la riga. La pratica editoriale giapponese sta su 1,7-1,8 contro l'1,5-1,7 del latino. Si applica quando l'interfaccia e' in giapponese. */ html[lang="ja"] .wall_post, html[lang="ja"] .wall_item_comment, html[lang="ja"] .comment_text .full_comment, html[lang="ja"] .wrapper-one-article .one-article .blogs_post_content { line-height: 32px; } /* --- i commenti parlano con la voce dei post ------------------------------ 14/8: erano rimasti in Inter a 15px mentre i post erano in Literata a 18 — incoerenza vera, notata da Alain: un commento e' testo scritto da una persona, esattamente come un post. Si applica la serif al TESTO, non ai comandi («Ti piace», «Rispondi», l'ora) che restano interfaccia. Corpo 16px: un gradino sotto il post, perche' il commento e' secondario, ma abbastanza per leggersi bene. */ .comment_text_cont, .txt_comment, .comment_text .comment_text_cont, .blog_post_comment_item .comment_text_cont { font-family: 'Literata', 'YJ JP Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif; font-size: 16px; line-height: 26px; } /* --- la firma dell'articolo ---------------------------------------------- Sui giornali la firma e' composta nello stesso carattere del pezzo: e' parte dell'articolo, non dell'interfaccia. Qui la riga con autore, data e «Tutti i blog» sta in .user_information dentro la pagina di un articolo. */ .wrapper-one-article .user_information, .wrapper-one-article .user_information a, .wrapper-one-article .cham-meta, .wrapper-one-article .blog_edit_post { font-family: 'Literata', 'YJ JP Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }