Stiamo sperimentando la riduzione delle dimensioni del testo e dell’interlinea, e l’aumento dell’altezza dei blocchi di codice, al fine di migliorare la leggibilità di blocchi di codice più grandi. Questo è principalmente problematico per grandi blocchi di codice che superano le 20 righe o più. Il risultato è che più codice può essere visto nella normale finestra di visualizzazione.
Prima
Dopo
La modifica è stata apportata qui:
Sembra che cambiare la dimensione del carattere di codice inline come questo sia probabilmente un effetto collaterale non intenzionale?
Sì, è stato involontario, dovremmo modificarlo in modo che vengano modificati solo i blocchi completi e non il codice inline.
Per quanto mi riguarda, uso questo sulla mia istanza di sviluppo hackity hack:
pre code {
font-size: var(--font-down-1);
}
risultato
Ho inviato una PR per rimuovere le modifiche di stile al testo monospace inline e anche per aumentare leggermente l’altezza della linea nei blocchi <pre>.
Questo sta purtroppo compromettendo la leggibilità di snippet più brevi.
Ad esempio:
Il font è più piccolo, l’altezza della linea è più corta.
Può questo influire solo su blocchi di codice molto lunghi? Dovrebbe essere una modifica fondamentale @jordan.vidrine?
Voglio anche evidenziare la differenza qui tra questo esperimento e Stack Overflow.
Esperimento attuale
Stack Overflow
Alcune cose che noto immediatamente sono:
Devo approfondire hljs e vedere perché il nostro caso d’uso sta mettendo in grassetto i titoli.
Adoro il fatto che tu abbia dato un’occhiata a Stack Overflow, perché se qualcuno avesse capito come visualizzare i blocchi di codice, sarebbero stati loro.
Un’altra osservazione, la dimensione del carattere non sembra cambiare nonostante sia cambiata… (15px → 13px ma i colori compensano in parte)
Il ritmo visivo e l’altezza della linea qui sono molto migliori:
Stack Overflow
Esperimento attuale
L’altezza della linea è notevolmente un problema e il nostro “restringimento” è andato troppo oltre perché il nostro carattere di base è più grande e più spazioso di Stack Overflow.
Supporto molto la rimozione del grassetto nel nostro attuale esperimento e l’aumento delle dimensioni, dell’altezza della linea.
Questa PR ha apportato le seguenti modifiche: https://github.com/discourse-org/design-experiments/pull/77
Sembra fantastico, Jordan. In questo caso, penso che usare un peso del font coerente aiuti la leggibilità. Mi piace anche l’aumento dello spazio.
Grazie, sono d’accordo. Penso che vorrei anche dare un’occhiata ai colori e al motivo per cui hljs utilizza i colori che sta utilizzando. Non ho mai visto questo schema di colori utilizzato da nessuna parte online.
Apprezzo le modifiche alla tipografia, ma trovo lo sfondo scuro eccessivo. Lo sfondo più chiaro è molto più facile da leggere.
Modifica in arrivo.
Dopo ulteriori ricerche, vedo che i colori che stiamo utilizzando si basano su uno schema datato utilizzato da github, forse 10 anni fa, o addirittura 4.
C’è spazio qui per cambiare i colori predefiniti con qualcosa di aggiornato?
Github ha uno schema di colori aggiornato da allora, insieme ad altre opzioni per essere uno schema chiaro predefinito.
Stack Overflow
Atom One Light
Nuovo Github
hljs default 
La mia preferenza personale andrebbe verso qualcosa con colori più tenui: nei tuoi esempi, Stack Overflow è la mia scelta.
dopo un paio di giorni devo ancora strizzare un po’ gli occhi con la dimensione del carattere più piccola, non penso che valga il risparmio di spazio
Provi la stessa cosa su Stack Overflow (ad esempio)? Il calcolo della dimensione del font e dell’altezza della linea è ora lo stesso tra Discourse e SO.
max-height su Discourse è leggermente inferiore a 500px rispetto a 600px.
Il contrasto è molto peggiore nel nostro caso e fa una grande differenza quando si cerca di leggere testo piccolo, ad esempio (Stack Overflow a destra):
Sì, capisco cosa intendi.
Cosa ne pensi di queste modifiche nel PR che ho aperto: https://github.com/discourse-org/design-experiments/pull/79
Ecco un’opzione in cui aggiungo il nero allo sfondo in modalità scura, invece di usare qualcosa basato sul secondario o primario. Lo faccio tramite rgba(0,0,0,0.25)
Qualcuno potrebbe fare un test anche con il recente componente/tema per la numerazione delle righe dei blocchi di codice? Grazie mille in anticipo.
