Ho una parola, che ha sia apice sia pedice. Ora lo renderò in questo modo word<sub>1</sub><sup>2</sup> E ottenere quanto segue: HTML: posso inserire il testo di pedice proprio sotto l'apice?
word12 .
Come posso mettere l'indice esattamente sotto l'apice?
Bene, non è possibile farlo con semplice HTML vaniglia. Come è stato menzionato, usa CSS. Ma vorrete anche un po 'di posizionamento!
Ci sono molti modi si può fare questo con i CSS, e ognuno ha i suoi pro e contro. Un modo sarebbe utilizzare il posizionamento relativo. Un esempio veloce potrebbe funzionare in questo modo:
<span class="fraction">
<span class="numerator">3</span>
<span class="denominator">4</span>
</span>
E il CSS di andare avanti con questo:
span.fraction { }
/* Or child selector (>) if you don't care about IE6 */
span.fraction span.numerator {
position:relative;
top:-0.5em;
}
span.fraction span.denominator {
position:relative;
top:0.5em;
left:-0.5em; /* This will vary with font... */
}
Questo particolare esempio potrebbe funzionare meglio se si utilizza un carattere a spaziatura fissa.
Ma qui l'offset a sinistra dipende dalla dimensione del apice e pedice. Ma cosa succede se il nominator è 31234 e il denominatore è 56547? Esiste una decisione unificata che non dipende dalla dimensione di apice e pedice? – netimen
@netimen Questo è un buon punto e ci ho pensato dopo aver montato l'esempio sopra. In breve: no, non c'è valore magico. Questa è un'occasione in cui il modulo CSS3 Ruby potrebbe tornare utile. –
@netimen Sarebbe possibile calcolare l'offset corretto utilizzando JavaScript e quindi applicarlo a ciascuna istanza di super/pedice. Cosa stai cercando di rappresentare? Frazioni? Composti chimici? –
Ecco una soluzione pulita. Creare due classi CSS:
.nobr {
white-space: nowrap;
}
.supsub {
display: inline-block;
margin: -9em 0;
vertical-align: -0.55em;
line-height: 1.35em;
font-size: 70%;
text-align: left;
}
Si potrebbe già avere la classe "nobr" come una sostituzione <nobr>. Ora per esprimere la formula molecolare per solfato, utilizzare la classe "supsub" come segue:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
cioè, racchiudono il tuo apice/pedice all'interno della classe "supsub", e mettere un < br/> tra di loro. Se ti piacciono i tuoi apici/pedici un po 'più grandi o più piccoli, regola le dimensioni del font e poi armeggia con l'allineamento verticale e l'altezza della linea. L'opzione -9em nell'impostazione del margine serve a mantenere gli apici/pedici dall'aggiunta all'altezza della riga che li contiene; qualsiasi grande valore andrà bene.
Utilizzare lo stile di tabella CSS (ad eccezione di IE8 e di seguito). HTML:
<span class="over-under">
<span class="over">sup</span>
<span class="under">sub</span>
</span>
CSS:
span.over-under {
position: relative;
top: 1em;
display: inline-block;
}
span.over-under > .over {
display: table-row;
}
span.over-under > .under {
display: table-row;
}
Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/
Oltre ad essere più semplice di quanto relative modifiche di posizione, questa soluzione consente di evitare distorsioni di layout che nascono da queste alternative. Vedi, ad esempio, https://jsfiddle.net/FredLoney/da89nyk2/1/.
Come faccio? – netimen