Come posso ottenere un bordo superiore stretto per glifi di un font?

Question

Ho bisogno di un progetto per mostrare le regole sulla linea di base, l'altezza x e l'altezza del cappuccio di diversi campioni di font. Ho preso cura della linea di base e della x-height, ma sto avendo problemi ad ottenere una regola CSS generale che disegnerà un bordo all'altezza del tappo di qualsiasi carattere a cui applico la regola. Ho manipolato l'altezza della linea, ma lo spazio tra glifi di un font e la parte superiore della sua casella di layout è diverso da font a font, quindi impostarlo una volta non funzionerà con qualsiasi font.

questo esempio di codice Pen illustra il problema: http://codepen.io/DrSpatula/pen/BAgqG

Answer 1

E 'molto sporco, ma hai provato un un pixel gif come sfondo ripetuta allora si può impostare la sua posizione rispetto al carattere?

Answer 2

forse posso aiutare. Ho fatto un piccolo violino per te da vedere. (http://jsfiddle.net/dgxJh/1/)

Temo tuttavia che con questa soluzione sarà necessario riposizionare lo span con la linea rosa per ogni carattere e ogni tipo di carattere. Ma in sostanza si posiziona un arco sopra il testo utilizzando il codice seguente:

span{ 
    height: 1px; 
    width: 100%; 
    background: pink;  
    display: block; 
    position: absolute; 
    top: 0.6em; 
} 

non dimenticate di posizionare il contenitore relativo

Answer 3

Si è ora applicando la line-height al p. Se lo rimuovi e applica l'altezza della linea a span.text e lo imposti su un valore di 1.55ex, viene visualizzato correttamente.

Così il vostro CSS sarà:

p { 
     font-size: 72px; 
     position: relative; 
     margin: 0; 
     padding: 0; 
    } 

    p span { 
     margin: 0; 
     padding: 0; 
     display: inline-block; 
    } 

    .sans { 
     font-family: sans-serif; 
    } 

    .text { 
     border-top: 1px solid blue; 
     line-height: 1.55ex; 
    } 

    .rule { 
     height: 1ex; 
     border-top: 1px dotted red; 
     border-bottom: 1px solid blue; 
     position: relative; 
     left: -7.25em; 
     width: 7.75em; 
     top: 1px; 
    }