Aligner un caractère en haut de lettres adjacentes

Question

Je souhaite aligner un caractère en HTML aux sommets des personnages à côté. L'attribut css vertical-align semble être ce que je veux, mais je vais avoir des ennuis.

Utilisation vertical-align: text-top ne semble pas faire ce que je veux, mais je pense qu'il devrait la lecture de la spécification.

À l'heure actuelle, j'utilise vertical-align: 10% qui est une solution raisonnable, sauf que je dois calculer le nombre approprié sur chaque plate-forme pour l'obtenir à regarder à droite. Navigateur détection pour définir la valeur à qui je pense est probablement semble juste comme la mauvaise solution.

Answer 1

laid, mais vous pouvez utiliser des cellules de tableau.

Tout d'abord définir des styles:

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

Alors le code html:

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>

Answer 2

Essayez la balise <sup>. Il est destiné à exacly ce que vous essayez de faire. Après avoir implémenté, vous pouvez contrôler encore plus avec css.

Exemple: M<sup>c</sup>Phe yeilds M ^c Phe

http://www.w3schools.com/TAGS/tag_sup.asp

Si le « c » est trop petite, il suffit de faire <style> sup { font-size: 9pt } </style> ou quelque chose comme ça.

Answer 3

Commentaire de Anthony à la question m'a donné une idée d'envelopper le « c » avec une étiquette de <sup> sémantiquement correcte (ou je suppose que vous pouvez continuer à utiliser un <span>) puis utilisez la text-transform: uppercase; CSS là-dessus.

Answer 4

Certaines de ces idées sont sur la bonne voie, mais aucun travail tout à fait. J'ai fini par combiner la suggestion de Josh Stodola utiliser text-transform: uppercase; avec la suggestion de Keltex d'utiliser une lettre majuscule dans une police plus petite pour avoir des pseudo-small-caps, même si vous utilisez des tables est unnessicary.

Il repose toujours sur futzing autour des tailles de police et les hauteurs de ligne, mais je peux obtenir un effet plus cohérente de cette façon au moins.

La suggestion d'utiliser <sup> n'est pas vraiment utile, car je dois remplacer tous ses styles de toute façon, il ne diffère pas d'un <span>. Sémantiquement il peut y avoir une différence, mais assez petit qu'il n'a pas d'importance.