:: before :: after альтернатива (ы) для отображения текста / символов для разных макетов - PullRequest
Новая
       28

:: before :: after альтернатива (ы) для отображения текста / символов для разных макетов

0 голосов
/ 14 апреля 2020 

p {
  font-weight:bold;
}
.line.inline_layout .character {
  font-variant-caps: small-caps
}
.line.inline_layout .stage_direction {
  font-style: italic;
  color: #333;
}
.line.inline_layout .stage_direction::before {
  content:", "
}
.line.inline_layout .stage_direction::after {
  content:" – "
}
.line.screenplay_layout {
  text-align: center;
  font-family: Courier;
}
.line.screenplay_layout .character {
  text-transform: uppercase;
  display:block;
}
.line.screenplay_layout .stage_direction {
  text-transform: uppercase;
  display:block;
}
.line.screenplay_layout .stage_direction::before {
  content:"("
}
.line.screenplay_layout .stage_direction::after {
  content:")"
}
<p>Inline layout :</p>
<div class="line inline_layout">
  <span class="character">Mike</span><!--
  --><span class="stage_direction">whispering</span>
  <span class="sentence">Watch out ! He's sleeping !</span>
</div>

<p>Screenplay layout :</p>
<div class="line screenplay_layout">
  <span class="character">Mike</span>
  <span class="stage_direction">whispering</span>
  <span class="sentence">Watch out ! He's sleeping !</span>
</div>

Это мое HTML: 

<div class="line">
  <span class="character">Mike</span>
  <span class="stage_direction">whispering</span>
  <span class="sentence">Watch out ! He's sleeping !</span>
</div>

И у меня есть два способа его отображения, в зависимости от выбора пользователя (см. Фрагмент ), существует 4 макета, и пользователь должен иметь возможность переключаться в любое время.

Он работал прекрасно, пока мне не пришлось разрешать пользователю копировать / вставлять и печатать текст.

Потому что Мне также нужно скопировать элементы :: before и :: after (я знаю, что они не являются фактическим содержимым).

Так есть ли обходной путь для этого?

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

С ответом Уилла я нашел решение, но без необходимости JavaScript.

См. Фрагмент.

Спасибо, Уилл! 

.sentence span, .stage_direction span {
  display : none
}

p {
  font-weight:bold;
  color: #0a0
}

.line.inline_layout .character {
  font-variant-caps: small-caps
}
.line.inline_layout:first-letter,
.line.classic_layout .character,
.line.screenplay_layout .character,
.line.screenplay_layout .stage_direction {
  text-transform: uppercase;
}
.line.inline_layout .stage_direction, .line.classic_layout .stage_direction {
  font-style: italic;
  color: #333;
}
.line.inline_layout .stage_direction span:first-child,
.line.inline_layout .character + .sentence span,
.line.inline_layout .stage_direction + .sentence span:nth-child(2),
.line.classic_layout .stage_direction span:first-child,
.line.screenplay_layout .stage_direction span:nth-last-child(-n+2)
{
  display: inline;
}
.line.classic_layout, 
.line.screenplay_layout .character, 
.line.screenplay_layout .stage_direction {
  text-align: center;
}
.line.classic_layout .sentence {
  text-align: left
}
.line.screenplay_layout {
  font-family: Courier;
}
.line.classic_layout .sentence,
.line.screenplay_layout .stage_direction, 
.line.screenplay_layout .sentence,
.line.screenplay_layout .character {
  display:block
}
<p>INLINE PLAY with stage direction</p>
<div class="line inline_layout">
   <span class="character">mike</span><!--
--><span class="stage_direction"><span>, </span><span>(</span>whispering<span>)</span></span><!--
--><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span>
</div>

<p>INLINE PLAY without stage direction</p>
<div class="line inline_layout">
   <span class="character">mike</span><!--
--><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span>
</div>
<hr/>
<p>CLASSIC PLAY with stage direction</p>
<div class="line classic_layout">
   <span class="character">mike</span><!--
--><span class="stage_direction"><span>, </span><span>(</span>whispering<span>)</span></span><!--
--><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span>
</div>

<p>CLASSIC PLAY without stage direction</p>
<div class="line classic_layout">
   <span class="character">mike</span><!--
--><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span>
</div>
<hr/>


<p>SCREENPLAY with stage direction</p>
<div class="line screenplay_layout">
   <span class="character">mike</span><!--
--><span class="stage_direction"><span>, </span><span>(</span>whispering<span>)</span></span><!--
--><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span>
</div>

<p>SCREENPLAY without stage direction</p>
<div class="line screenplay_layout">
   <span class="character">mike</span><!--
--><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span>
</div>
0 голосов
/ 14 апреля 2020

Если у вас есть 4 возможных макета, лучше всего использовать Javascript и отбрасывать псевдоэлементы.

Допустим, ваш пользователь может выбрать макет по своему выбору с элементами внутри класса «селектор» и ваш стиль по умолчанию "встроенный". Ваш HTML будет выглядеть следующим образом: 

<div class="selector">
  <a id="inline">inline</a>
  <a id="screenplay">screenplay</a>
</div>
<br>
<div class="script inline">
  <p class="character">Mike</p>
  <p class="stage_direction"><span>(</span>whispering<span>)</span></p>
  <p class="sentence">Watch out ! He's sleeping !</p>
</div>

Нажав на селектор, вы измените свой класс div скрипта следующим кодом: 

document.querySelector(".selector").addEventListener("click", function(e){
  var itemClicked = e.target;
  // Get the new class stored in ID of element (you may use data attribute instead)
  var scriptClass = itemClicked.id;
  var script = document.querySelector(".script");
  // Reset your class to script alone
  script.className = "script";
  // Add the new class
  script.classList.add(scriptClass);
});

Затем вы можете выбрать стиль , показать или скрыть элементы, в зависимости от выбранного класса. Пример того, как ваш CSS будет выглядеть: 

.selector a {
  display: inline-block;
  margin-right: 20px;
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
.script.inline {
  font-family:arial, verdana, sans-serif;
}
.script.inline p {
  display: inline;
}
.script.inline .stage_direction span {
  display: none;
}
.script.screenplay {
  font-family:courier, courier new, serif;
}
.script.screenplay .stage_direction {
  text-transform: uppercase;
}

Смотрите рабочий пример здесь: https://jsfiddle.net/5c4udr8j/1/

...