Apice in CSS?

Come posso ottenere l'apice, solo nei CSS?

Ho un foglio di stile in cui segnare i collegamenti esterni con un carattere in apice, ma ho difficoltà a allineare correttamente il personaggio.

Quello che ho attualmente, assomiglia a questo:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

ma non funziona.

Naturalmente, <sup>userei il -tag, solo se contentconsentirei HTML ...

Puoi scrivere in apice con vertical-align: super, (più una font-sizeriduzione di accompagnamento ).

Tuttavia, assicuratevi di leggere le altre risposte qui, in particolare quelli per paulmurray e Cletus , per informazioni utili.

Onestamente non vedo il punto nel fare apice / pedice solo nei CSS. Non ci sono utili attributi CSS per questo, solo un mucchio di implementazioni nostrane tra cui:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

o usando vertical-align o sono sicuro in altri modi. Il fatto è che inizia a complicarsi:

• Spaziatura in apice CSS sull'altezza della linea;
• Attenzione CSS per Apice / Subcript sul motivo per cui probabilmente non dovrebbe stile apice / pedice con i CSS a tutti ;

Vale la pena sottolineare il secondo punto. In genere apice / pedice non è in realtà un problema di stile ma è indicativo di significato.

Nota a margine: vale la pena menzionare questo elenco di entità per comuni espressioni matematiche in apice e pedice anche se questa domanda non è correlata a questo.

I tag sub / sup sono in HTML e XHTML. Vorrei solo usare quelli.

Per quanto riguarda il resto del CSS, gli attributi pseudo-elemento e content: after non sono ampiamente supportati. Se davvero non vuoi inserirlo manualmente nell'HTML, penso che una soluzione basata su Javascript sia la tua prossima scommessa migliore. Con jQuery questo è semplice come:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

La documentazione CSS contiene un equivalente CSS standard del settore per tutti i costrutti HTML. Cioè: la maggior parte dei browser web in questi giorni non esplicitamente gestiscono SUB, SUP, B, Ie così via - che (kinda sorta) vengono convertiti in SPANelementi con appositi proprietà CSS, e il motore di rendering si occupa solo di questo.

La pagina è l' appendice D. Foglio di stile predefinito per HTML 4

I bit che vuoi sono:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Stavo lavorando su una pagina con l'obiettivo di avere un testo chiaramente leggibile, con elementi in apice NON che cambiassero i margini superiore e inferiore della linea, con le seguenti osservazioni:

Se per il tuo testo principale hai, line-height: 1.5emad esempio, dovresti ridurre l'altezza della linea del tuo testo in apice affinché appaia correttamente. Ho usato line-height: 0.5em.

Inoltre, vertical-align: superfunziona bene nella maggior parte dei browser, ma in IE8 quando è presente un elemento in apice, il resto di quella riga viene spostato verso il basso. Quindi invece ho usato vertical-align: baselineinsieme un aspetto negativo tope position: relativeper ottenere lo stesso effetto, che sembra funzionare meglio su tutti i browser.

Quindi, per aggiungere alle "implementazioni nostrane":

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

http://htmldog.com/articles/superscript/ In sostanza:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Funziona bene in pratica, per quanto ne so.

Quanto segue è tratto dal html.css interno di Mozilla Firefox:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Quindi, nel tuo caso sarebbe qualcosa come:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Questa è un'altra soluzione pulita:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

In questo modo puoi ancora usare i tag sup / sub ma hai corretto il loro comportamento odioso per rovinare sempre l'altezza della linea di paragrafo .

Quindi ora puoi fare:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

E l'altezza della linea di paragrafo non deve essere rovinata.

Testato su IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Ho provato usando a p {line-height: 1.3;} (che è una buona altezza della linea a meno che tu non voglia che le tue linee rimangano troppo vicine) e funziona ancora, perché "-0.6em" è una quantità così piccola che anche con quell'altezza della linea il testo secondario / secondario si adatterà e non andare l'uno sopra l'altro.

Ho dimenticato un dettaglio che potrebbe essere rilevante Uso sempre DOCTYPE nella prima riga della mia pagina (in particolare utilizzo HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Quindi non so se questa soluzione funziona bene quando il browser è in modalità quirkmode (o non in modalità standard) a causa della mancanza di DOCTYPE o di un DOCTYPE che non attiva la modalità Standard / Quasi standard.

Se stai modificando la dimensione del carattere, potresti voler smettere di ridurre le dimensioni con questa regola:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Non sono sicuro che ciò sia correlato, ma ho risolto il mio problema con ²entità HTML poiché non ero in grado di aggiungere altri tag html all'interno di un <label>tag. Quindi l'idea stava usando codici ASCII invece di tag css o HTML.

Check out: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

se sembra che tu voglia "vertical-align: text-top"

La proprietà CSS font-variant-positionè in fase di esame e potrebbe eventualmente essere la risposta a questa domanda. A partire dall'inizio del 2017, tuttavia, solo Firefox lo supporta.

.super {
    font-variant-position: super;
}

Vedi MDN .

Correlato o forse non correlato, l'uso di apice come elemento HTML o come span + css nel testo potrebbe causare problemi con la localizzazione - nei programmi di localizzazione.

Per esempio diciamo "3 ^rd software di terze parti":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

In che modo i traduttori possono tradurre "rd"? Possono lasciarlo vuoto per diverse lingue cirriche, ma che dire di altre lingue esotiche o RTL?

In questo caso è meglio evitare l'uso di apici e utilizzare un testo completo come "software di terze parti". Oppure, come menzionato qui in altri commenti, aggiungendo segni più in apice tramite jQuery.

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Ecco come si usa sup:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Trovato questo tramite google chrome inspect element.