Блог

Главная - Вопросы по программированию - Преобразованный Текст Не Выстраивается В Очередь

Преобразованный Текст Не Выстраивается В Очередь

#html #css #css-transitions

Вопрос:

Я пытаюсь обвести текст по кругу, вот так:

введите описание изображения здесь

Я добился этого, обертывая каждую букву буквой а <span></span> и придавая им встроенный стиль, подобный этому: <span style="--degrees: 9.2307692307692deg;">i</span> .

(Эти числа генерируются PHP, вот почему они такие сумасшедшие.)

Я почти достиг того, что пытаюсь сделать, но буквы выстраиваются неправильно. Например, «Я» в слове «Найти» либо слишком высоко, либо слишком низко:

введите описание изображения здесь

Вы можете посмотреть демо-версию ниже:

 .circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle span {
    transform: rotate(var(--degrees));
    position: absolute;
    height: 85px;
    color: #000;
    text-transform: uppercase;
    left: 50%;
    transform-origin: 50% 100%;
    font-weight: 900;
    font-family: Arial;
  /*  animation: rotate 20s linear infinite; */
}

.circle span.highlight {
    color: #439709;
}

@keyframes rotate {
  from { transform: rotate(var(--degrees))  }
  to { transform: rotate(calc(var(--degrees)   359deg)) }
} 
 <span class="circle">
  <span style="--degrees: 0deg;">F</span>
  <span style="--degrees: 9.2307692307692deg;">i</span>
  <span style="--degrees: 18.461538461538deg;">n</span>
  <span style="--degrees: 27.692307692308deg;">d</span>
  <span style="--degrees: 36.923076923077deg;"> </span>
  <span style="--degrees: 46.153846153846deg;">O</span>
  <span style="--degrees: 55.384615384615deg;">u</span>
  <span style="--degrees: 64.615384615385deg;">t</span>
  <span style="--degrees: 73.846153846154deg;" class="highlight"></span>
  <span style="--degrees: 83.076923076923deg;" class="highlight">W</span>
  <span style="--degrees: 92.307692307692deg;" class="highlight">h</span>
  <span style="--degrees: 101.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 110.76923076923deg;"> </span>
  <span style="--degrees: 120deg;">F</span>
  <span style="--degrees: 129.23076923077deg;">i</span>
  <span style="--degrees: 138.46153846154deg;">n</span>
  <span style="--degrees: 147.69230769231deg;">d</span>
  <span style="--degrees: 156.92307692308deg;"> </span>
  <span style="--degrees: 166.15384615385deg;">O</span>
  <span style="--degrees: 175.38461538462deg;">u</span>
  <span style="--degrees: 184.61538461538deg;">t</span>
  <span style="--degrees: 193.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 203.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 212.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 221.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 230.76923076923deg;"> </span>
  <span style="--degrees: 240deg;">F</span>
  <span style="--degrees: 249.23076923077deg;">i</span>
  <span style="--degrees: 258.46153846154deg;">n</span>
  <span style="--degrees: 267.69230769231deg;">d</span>
  <span style="--degrees: 276.92307692308deg;"> </span>
  <span style="--degrees: 286.15384615385deg;">O</span>
  <span style="--degrees: 295.38461538462deg;">u</span>
  <span style="--degrees: 304.61538461538deg;">t</span>
  <span style="--degrees: 313.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 323.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 332.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 341.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 350.76923076923deg;"> </span>
</span>

Я не знаю, является ли это ограничением преобразования элементов, или это проблема высоты линии, или что мне нужно было сделать, чтобы выровнять их. Любые идеи приветствуются. Спасибо.

Ответ №1:

Проблема возникает из-за того, что используется шрифт с переменным интервалом.

Если вы переключитесь на моноширинное пространство, то все будет выглядеть нормально:

введите описание изображения здесь

 .circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle span {
    transform: rotate(var(--degrees));
    position: absolute;
    height: 85px;
    color: #000;
    text-transform: uppercase;
    left: 50%;
    transform-origin: 50% 100%;
    font-weight: 900;
    font-family: monospace;
  /*  animation: rotate 20s linear infinite; */
}

.circle span.highlight {
    color: #439709;
}

@keyframes rotate {
  from { transform: rotate(var(--degrees))  }
  to { transform: rotate(calc(var(--degrees)   359deg)) }
} 
 <span class="circle">
  <span style="--degrees: 0deg;">F</span>
  <span style="--degrees: 9.2307692307692deg;">i</span>
  <span style="--degrees: 18.461538461538deg;">n</span>
  <span style="--degrees: 27.692307692308deg;">d</span>
  <span style="--degrees: 36.923076923077deg;"> </span>
  <span style="--degrees: 46.153846153846deg;">O</span>
  <span style="--degrees: 55.384615384615deg;">u</span>
  <span style="--degrees: 64.615384615385deg;">t</span>
  <span style="--degrees: 73.846153846154deg;" class="highlight"></span>
  <span style="--degrees: 83.076923076923deg;" class="highlight">W</span>
  <span style="--degrees: 92.307692307692deg;" class="highlight">h</span>
  <span style="--degrees: 101.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 110.76923076923deg;"> </span>
  <span style="--degrees: 120deg;">F</span>
  <span style="--degrees: 129.23076923077deg;">i</span>
  <span style="--degrees: 138.46153846154deg;">n</span>
  <span style="--degrees: 147.69230769231deg;">d</span>
  <span style="--degrees: 156.92307692308deg;"> </span>
  <span style="--degrees: 166.15384615385deg;">O</span>
  <span style="--degrees: 175.38461538462deg;">u</span>
  <span style="--degrees: 184.61538461538deg;">t</span>
  <span style="--degrees: 193.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 203.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 212.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 221.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 230.76923076923deg;"> </span>
  <span style="--degrees: 240deg;">F</span>
  <span style="--degrees: 249.23076923077deg;">i</span>
  <span style="--degrees: 258.46153846154deg;">n</span>
  <span style="--degrees: 267.69230769231deg;">d</span>
  <span style="--degrees: 276.92307692308deg;"> </span>
  <span style="--degrees: 286.15384615385deg;">O</span>
  <span style="--degrees: 295.38461538462deg;">u</span>
  <span style="--degrees: 304.61538461538deg;">t</span>
  <span style="--degrees: 313.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 323.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 332.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 341.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 350.76923076923deg;"> </span>
</span>

ОБНОВЛЕНИЕ: приведенное выше не является полным решением, поскольку оно изменяет шрифт. Хотя может быть возможно найти приемлемую моноверсию требуемого шрифта (например, существуют моноверсии Arial), это не будет общим решением, возможным для всех шрифтов.

Этот фрагмент размещает разделители встроенных блоков вместо промежутков и центрирует символ внутри него. Он также немного увеличивает высоту, чтобы два широких символа, такие как W и H, не сталкивались друг с другом. Очевидно, вам захочется поиграть с настройками, чтобы получить именно тот внешний вид, который вы хотите.

 .circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle div {
  transform: rotate(var(--degrees));
  position: absolute;
  height: 85px;
  height: 100px;
  /* CHANGED */
  color: #000;
  text-transform: uppercase;
  left: 50%;
  transform-origin: 50% 100%;
  font-weight: 900;
  font-family: Arial;
  rletter-spacing: 0.2em;
  text-align: center;
  width: 2em;
  /*  animation: rotate 20s linear infinite; */
}

.circle div.highlight {
  color: #439709;
}

@keyframes rotate {
  from {
    transform: rotate(var(--degrees))
  }
  to {
    transform: rotate(calc(var(--degrees)   359deg))
  }
} 
 <div class="circle">
  <div style="--degrees: 0deg; display: inline-block;">F</div>
  <div style="--degrees: 9.2307692307692deg;">i</div>
  <div style="--degrees: 18.461538461538deg;">n</div>
  <div style="--degrees: 27.692307692308deg;">d</div>
  <div style="--degrees: 36.923076923077deg;"> </div>
  <div style="--degrees: 46.153846153846deg;">O</div>
  <div style="--degrees: 55.384615384615deg;">u</div>
  <div style="--degrees: 64.615384615385deg;">t</div>
  <div style="--degrees: 73.846153846154deg;" class="highlight"></div>
  <div style="--degrees: 83.076923076923deg;" class="highlight">W</div>
  <div style="--degrees: 92.307692307692deg;" class="highlight">h</div>
  <div style="--degrees: 101.53846153846deg;" class="highlight">y</div>
  <div style="--degrees: 110.76923076923deg;"> </div>
  <div style="--degrees: 120deg;">F</div>
  <div style="--degrees: 129.23076923077deg;">i</div>
  <div style="--degrees: 138.46153846154deg;">n</div>
  <div style="--degrees: 147.69230769231deg;">d</div>
  <div style="--degrees: 156.92307692308deg;"> </div>
  <div style="--degrees: 166.15384615385deg;">O</div>
  <div style="--degrees: 175.38461538462deg;">u</div>
  <div style="--degrees: 184.61538461538deg;">t</div>
  <div style="--degrees: 193.84615384615deg;" class="highlight"> </div>
  <div style="--degrees: 203.07692307692deg;" class="highlight">W</div>
  <div style="--degrees: 212.30769230769deg;" class="highlight">h</div>
  <div style="--degrees: 221.53846153846deg;" class="highlight">y</div>
  <div style="--degrees: 230.76923076923deg;"> </div>
  <div style="--degrees: 240deg;">F</div>
  <div style="--degrees: 249.23076923077deg;">i</div>
  <div style="--degrees: 258.46153846154deg;">n</div>
  <div style="--degrees: 267.69230769231deg;">d</div>
  <div style="--degrees: 276.92307692308deg;"> </div>
  <div style="--degrees: 286.15384615385deg;">O</div>
  <div style="--degrees: 295.38461538462deg;">u</div>
  <div style="--degrees: 304.61538461538deg;">t</div>
  <div style="--degrees: 313.84615384615deg;" class="highlight"> </div>
  <div style="--degrees: 323.07692307692deg;" class="highlight">W</div>
  <div style="--degrees: 332.30769230769deg;" class="highlight">h</div>
  <div style="--degrees: 341.53846153846deg;" class="highlight">y</div>
  <div style="--degrees: 350.76923076923deg;"> </div>
</div>

Комментарии:

1. Спасибо вам за это. Это не идеальное решение, так как нам нужно, чтобы семейство шрифтов соответствовало бренду, но это решение. Если никто другой не ответит на этот вопрос, я отмечу это как принятое.

2. Я добавил еще один фрагмент, который центрирует каждый символ в div встроенного блока вместо промежутка и слегка изменяет размер, чтобы символы были немного меньше прижаты друг к другу, но сохранял шрифт Arial с переменным интервалом.

3. Отличная доработка. Спасибо. Я изменил ширину на 2ch, и это сработало идеально.

Метки: