pedice e apice per lo stesso elemento

C'è un modo per aggiungere sia pedice che apice allo stesso elemento? Se lo facciopedice e apice per lo stesso elemento

Sample Text<sub>Sub</sub><sup>Sup</sup>

l'apice appare dopo il pedice. Un'idea che ho avuto è di fare qualcosa di simile:

<table> 
    <tr> 
     <td rowspan='2' valign='center'>Sample Text</td> 
     <td>Sup</td> 
    </tr> 
    <tr> 
     <td>Sub</td> 
    </tr> 
</table>

Sembra di fare il lavoro, ma è piuttosto brutto. Qualche idea migliore?

Grazie!

fonte

2010-09-18 Amati

Cosa stai in realtà cercando di ottenere? Potrei azzardare un'ipotesi che dovresti guardare al MathML, ma il tuo esempio è stato troppo astratto per dirlo. – Quentin

Sono solo alcuni dati che voglio visualizzare in un modo specifico. Niente di speciale come matematica, fisica, chimica ... ecc. Ho controllato MathML ma non è supportato nativamente da IE e questo significa che non posso usarlo. – Amati

io non sono un guru CSS, ma si potrebbe provare qualcosa sulla falsariga di http://jsfiddle.net/TKxv8/1/

ci sono un sacco di valori hardcoded e gli effetti su altri elementi di tutto può essere trovata solo in seguito, ma è un buon punto di partenza.

Sample Text 
<span class='supsub'> 
    <sup class='superscript'>Sup</sup> 
    <sub class='subscript'>Sub</sub> 
</span> 

.supsub {position: absolute} 
.subscript {color: green; display:block; position:relative; left:2px; top: -5px} 
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

fonte

2010-09-18 19:10:31 CyberDude

Grazie, esattamente quello di cui avevo bisogno! Potresti voler includere il tuo codice qui, nel caso qualcuno abbia lo stesso problema, in quanto la versione di jsfiddle potrebbe essere eliminata. – Amati

.supsub {position: absolute} .pedice {colore: verde; blocco di visualizzazione; position: relative; a sinistra: 2px; top: -5px} .superscript {color: red; blocco di visualizzazione; position: relative; a sinistra: 2px; top: -5px} Testo di esempio ^Sup Sub – CyberDude

dispiace per la formattazione - non funziona nei commenti e Non aggiungerei una nuova risposta – CyberDude

Bene, è possibile specificare la posizione di sup relativa al bordo destro di Sample Text.

http://jsfiddle.net/a754h/

fonte

2010-09-18 18:50:40

Non molto selezionabile. Il MathML sarebbe meglio, anche se non è ampiamente supportato. –

Ben, posso chiederti cosa intendi per "non molto selezionabile"? Vuoi dire se qualcuno vuole copiare/incollare i dati? – Amati

sembra fallire (rispetto alle aspettative) quando il sup è più lungo del sub, e il testo continua dopo. in questo esempio, la larghezza è determinata dal sub. le super posizioni appena, ma non espandono il riquadro di delimitazione. –

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.

fonte

2013-06-10 08:48:42 Dragonfly

Questo è simile al metodo CyberDudes, inoltre si fa rientrare il seguente testo a seconda della larghezza di sub e sup:

http://jsfiddle.net/jwFec/1/

Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br /> 

<style> 
.supsub { 
    display: inline-block; 
} 

.supsub sup, 
.supsub sub { 
    position: relative; 
    display: block; 
    font-size: .5em; 
    line-height: 1.2; 
} 

.supsub sub { 
    top: .3em; 
} 
</style>

fonte

2014-07-23 10:35:33 Thomas

pedice e apice per lo stesso elemento

risposta

Problemi correlati