Исходный сдвиг и выравнивание по вертикали по выделенному тексту?

Question

Итак, я не уверен, где искать, так как кажется, что это супер специфично, и я не знаю достаточно о CSS, чтобы знать, как это сделать сам.

Я хочу воспроизвести форматирование текста на рисунке ниже в HTML и CSS, чтобы текст можно было выбрать и скопировать/вставить, поскольку его предполагается читать.

Я не знаю, как бы буквы были выровнены по центру относительно другой буквы в паре (непосредственно под ней) и сделать сдвиг базовой линии, но все же иметь текст в одном абзаце или заголовке.

Благодарим за помощь!

Answer 1

Это может быть то, чего вы пытаетесь достичь. Это все еще одно слово, когда вы выбираете и копируете/вставляете.

В основном, чтобы обернуть каждую букву в <i> или около того, и установите position:relative; top:15px; или аналогичное значение, чтобы сместить некоторые из них.

JSFiddle Demo

.e { 
 
    background: silver; 
 
    background-size: cover; 
 
    text-align: center; 
 
    padding: 30px; 
 
} 
 
.e i { 
 
    font-style: normal; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    font-size: 50px; 
 
    text-transform: uppercase; 
 
    color: crimson; 
 
    margin: 0 10px; 
 
    display: inline; 
 
} 
 
.e i:nth-child(4), .e i:nth-child(6), .e i:nth-child(8) { 
 
    text-transform: none; 
 
} 
 
.e i:nth-child(2), .e i:nth-child(4), .e i:nth-child(7), .e i:nth-child(9) { 
 
    top: 15px; 
 
    position: relative; 
 
} 
 
.e i:nth-child(4) { 
 
    color: yellow; 
 
} 
 
.e i:nth-child(5):after { 
 
    content: "\A"; 
 
    white-space: pre; 
 
}

<div class="e"><i>e</i><i>x</i><i>h</i><i>i</i><i>b</i><i>i</i><i>t</i><i>i</i><i>o</i><i>n</i></div>