Блог

Главная - Вопросы по программированию - Как правильно расположить наклонный текст разных размеров в определенной зоне?

Как правильно расположить наклонный текст разных размеров в определенной зоне?

#css

#css

Вопрос:

Я пытаюсь расположить фрагмент текста (фиксированный шрифт и максимальная длина 6) поверх изображения. На изображении будет продукт, и я должен показать, как текст клиента будет выглядеть на этом продукте.

Хитрости :

  • текст наклонен
  • должен быть адаптивным (мобильные экраны сейчас наиболее важны)

Это то, что у меня пока есть jsfiddle здесь, но я считаю, что необходимо выполнить некоторую математику при позиционировании образца текста (используя функцию css calc())

Границы

(они не останутся и предназначены для лучшего понимания позиций)

  • черные границы показывают границы изображения и то, где текст должен поместиться
  • красная рамка — это контейнер для изображения и наложенного текста
  • зеленая рамка — это контейнер с наложенным текстом

 #sample-container {
  position: relative;
  width: 100%;
  z-index: 1;
  border-style: solid;
  border-color: red;
}

#sample-image {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

#sample-text {
  z-index: 2;
  position: absolute;
  text-align: center;
  top: 35%;
  right: 59%;
  text-align: right;
  color: gray;
  font-size: 5vw;
  transform: rotate(-16deg);
  border-style: solid;
  border-color: green;
}

@font-face {
  font-family: "Verdana";
}  
 <div id="sample-container">
  <img id="sample-image" src="https://i.ibb.co/R9qKGMb/sample-image.png">
  <div id="sample-text">SAMPLE</div>
</div>

Проблемы:

  • текст разной длины нарушает мое позиционирование
  • (дополнительно: если это показано на настольном веб-сайте, где содержимое сосредоточено на странице и есть поля слева и справа, я полагаю, для лучшей читаемости, то использование измерений относительно окна просмотра нарушает позиционирование при изменении размера; пример кода пока не показывает эту проблему, поскольку позволяет изображению занимать всю ширину страницы)

Ответ №1:

Одна из идей состоит в том, чтобы сделать текстовый контейнер шириной, равной 0, и полагаться на переполнение. Таким образом, вы всегда будете располагать один и тот же элемент (ширина / высота), каков текст внутри:

 #sample-text-configuration-container {
  position: relative;
}

#sample-container {
    position: relative;
    width: 100%;
    z-index: 1;
    border-style:solid;
    border-color:red;
}

#sample-image {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}

#sample-text {
    z-index: 2;
    position: absolute;
    text-align: center;
    top:39%;
    right:80%;
    text-align:right;
    color: gray;
    font-size:5vw;
    transform: rotate(-16deg);
    width:0;
}

@font-face {
  font-family: "Verdana";
}  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<div id="sample-text-configuration-container">
  <span>Custom text:</span>
  <input 
    type="text" 
    maxlength=6 
    value="SAMPLE" 
    onfocus="this.value=''"             
    oninput="document.getElementById('sample-text').innerHTML = this.value;"/>

  <br/>
  <span>Text top position:</span>
  <input 
    type="text" 
    value="39%"
    oninput="document.getElementById('sample-text').style.top = this.value;"/>

  <br/>
  <span>Text right position:</span>
  <input 
    type="text" 
    value="80%"
    onkeydown="document.getElementById('sample-text').style.left = this.value;"/>
  
  <br/>
  <span>Text size:</span>
  <input 
    type="text" 
    value="5vw" 
    oninput="document.getElementById('sample-text').style.fontSize = this.value;"/>

<div id="sample-container">
  <img id="sample-image" src="https://i.ibb.co/R9qKGMb/sample-image.png">
  <div id="sample-text">SAMPLE</div>
</div>

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

1. одна небольшая проблема с этим решением заключается в том, что текст выровнен по левому краю (ну, фальшиво выровнен по левому краю, поскольку он перетекает вправо от текстового контейнера), а желаемое состояние отличается (выравнивание по левому краю). в любом случае, ваше предложение натолкнуло меня на идею просто сделать текстовый контейнер фиксированной ширины, таким образом, я также могу контролировать выравнивание текста. спасибо. пример кода : jsfiddle.net/belun/vs0x32qj/6