Voting Chart

Nombre total de votes : 5

Is the line-height CSS property considered to be a readability/typography or layout choice?

  •  
    Readability
  •  
    Layout
  •  
    Both
Retour à Forum de site web

lisibilité line-height ou mise en page?

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 22nd, 2011, 9:34 pm

Ive été contemplant la catégorie à laquelle la propriété line-height css tombe dans; lisibilité ou de présentation? Examinons les scénarios suivants:
HTML Code: [ Select ]
<p>Elit sed nascetur tempor urna ultrices est a nunc? Mattis, vel turpis nunc sed est turpis, in cras tempor, proin risus mid a pid, scelerisque, a duis nec velit a, magna. Penatibus urna parturient pulvinar? Nascetur, lacus placerat rhoncus ut odio urna dolor tincidunt in hac, ac proin elementum nec? Mus! Enim risus pulvinar, duis tincidunt! Sit est ridiculus rhoncus. Odio come massa?</p>
 
  1. <p>Elit sed nascetur tempor urna ultrices est a nunc? Mattis, vel turpis nunc sed est turpis, in cras tempor, proin risus mid a pid, scelerisque, a duis nec velit a, magna. Penatibus urna parturient pulvinar? Nascetur, lacus placerat rhoncus ut odio urna dolor tincidunt in hac, ac proin elementum nec? Mus! Enim risus pulvinar, duis tincidunt! Sit est ridiculus rhoncus. Odio come massa?</p>
  2.  

CSS Code: [ Select ]
p {
width: 200px;
line-height: 1.8;
}
 
  1. p {
  2. width: 200px;
  3. line-height: 1.8;
  4. }
  5.  

Avec le code ci-dessus, line-height est utilisée comme un moyen de séparer chaque ligne du paragraphe pour une meilleure lisibilité. Toutefois, le code suivant montre quelque chose de différent:
HTML Code: [ Select ]
<header>
<h1>website.com</h1>
</header>
 
  1. <header>
  2. <h1>website.com</h1>
  3. </header>
  4.  

CSS Code: [ Select ]
header {
height: 50px;
}
 
h1 {
line-height: 50px;
vertical-align: middle;
}
 
  1. header {
  2. height: 50px;
  3. }
  4.  
  5. h1 {
  6. line-height: 50px;
  7. vertical-align: middle;
  8. }
  9.  

Cela permettra à la balise H1 pour siéger à la verticale au milieu de l'en-tête, quelque chose de plus congruent avec un choix de disposition. Ces exemples sont un peu primitif, mais je pense qu'ils illustrer mon propos. Alors qui est la propriété line-height plus cohérente dans; lisibilité, ou mise en page?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 22nd, 2011, 9:34 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Online

Message Mai 24th, 2011, 10:36 am

Quand il s'agit de texte en paragraphes, comme vous l'avez mentionné, la principale utilisation de celui-ci serait probablement pour une meilleure lisibilité. Il peut toujours être considérée comme mise en page, comme il affecte le style général du site ainsi. Cependant, j'ai utiliser l'attribut line-height dans de nombreux endroits autres que les paragraphes seulement, par exemple pour aider à des structures de navigation, images de fond dans les listes, dans les légendes des icônes, des listes ordonnées, des boutons radio, et bien plus encore. J'ai voté pour les deux, parce que je l'ai utilisé à la fois pour la lisibilité et la présentation des questions.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 152 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC