Используя Html / CSS, как отобразить перекрывающиеся / составленные символы Юникода (без использования диакритических знаков)?

Question

В настоящее время я ищу для отображения 2 символов, эквивалентных |< и >|, где

< = 0x2BC7 ⯇
> = 0x2BC8 ⯈
| = 0x6 C (буква 'l')

В первом сообщении я запросил, чтобы вертикаль была представлена ​​| = 0x2503 символом юникода, но этот символ в Arial неправильно определен в Chrome и на Edge Chromium.

Когда код и стиль HTML соответствуют

div.std > span.char
    {
    font-family: Arial;
    font-size:80px;
    background-color: lightgreen;
    }

<div class='std'>
    <span class='char'><span class='bar'>&nbsp;l</span><span class='triangle'>&#x2BC7;</span></span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'><span class='triangle'>&#x2BC8;</span><span class='bar'>l&nbsp;</span></span>
</div>

В браузере Chrome, я получаю следующий вывод

2 левых символа должны быть составлены так, чтобы символ | был связан с левой точкой треугольника.

2 правых символа должны быть составлены так, чтобы символ | был связан с правой точкой треугольника.

Как это сделать?

Этот экран используется для определения 4 кнопок, позволяющих осуществлять навигацию в списке.

По этой причине важно, чтобы

1. все кнопки имели одинаковую высоту
2. button | <и > | имеют одинаковую ширину
3. кнопки <и> имеют одинаковую ширину
4. все символы центрированы в зеленом прямоугольнике
5. все промежутки между двумя последовательными кнопками имеют одинаковую ширину

Также важно, чтобы предлагаемое решение работало в любом браузере.

PS: по центру означает, что левый и правый отступы одинаковы для всех символов, а верхний и нижний отступы также равны для все символы.

Например, в этом вопросе 2 вещи неверны.

1. в первом и последнем блоке c, символы бара и треугольника не связаны друг с другом
2. левый отступ первого блока c слишком большой (не = правый отступ)
3. правый отступ последнего блока c слишком большой (не = левый отступ)

Answer 1

Используйте шрифт, который всегда будет отображаться одинаково, и используйте letter-spacing для удаления ненужного места:

.uni {
  font-family: 'Inconsolata', monospace;
}

.uni span:first-child,
.uni span:last-child {
  letter-spacing: -0.3em;
}

<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&display=swap" rel="stylesheet">

<div class="uni">
  <span>&#x2503;&#x2BC7;</span>
  <span>&#x2BC7;</span>
  <span>&#x2BC8;</span>
  <span>&#x2BC8;&#x2503;</span>
</div>

<div class="uni" style="font-size:30px;">
  <span>&#x2503;&#x2BC7;</span>
  <span>&#x2BC7;</span>
  <span>&#x2BC8;</span>
  <span>&#x2BC8;&#x2503;</span>
</div>

<div class="uni" style="font-size:50px;">
  <span>&#x2503;&#x2BC7;</span>
  <span>&#x2BC7;</span>
  <span>&#x2BC8;</span>
  <span>&#x2BC8;&#x2503;</span>
</div>

Или просто используйте CSS для построения фигуры, и вы можете легко контролировать все:

.arrow-1 {
   width:50px;
   height:50px;
   margin:0 5px;
   display:inline-block;
   border:15px solid yellow; /* control the padding*/
   padding-left:5px; /* control the width of the bar */
   background:
     linear-gradient(#000,#000) left,
     linear-gradient(to bottom right,transparent 49.5%,#000 50%) top    content-box,
     linear-gradient(to top    right,transparent 49.5%,#000 50%) bottom content-box,
     yellow;
   background-size:
    5px 100%, /* same as padding-left */
    100% 50%,
    100% 50%;
   background-repeat:no-repeat;
}
.arrow-2 {
   width:50px;
   height:50px;
   margin:0 5px;
   display:inline-block;
   border:15px solid yellow; /* control the padding*/
   background:
     linear-gradient(to bottom right,transparent 49.5%,#000 50%) top   ,
     linear-gradient(to top    right,transparent 49.5%,#000 50%) bottom,
     yellow;
   background-size:100% 50%;
   background-repeat:no-repeat;
}

<div class="arrow-1">
</div>

<div class="arrow-2">
</div>

<div class="arrow-2" style="transform:scaleX(-1)">
</div>

<div class="arrow-1" style="transform:scaleX(-1)">
</div>

Answer 2

Используя только CSS, я получил следующий результат

Это можно сделать с помощью следующего кода

span.bar-triangle
	{
	display:inline-block;
	width: 1.82ch;
	}
span.bar-triangle > span.bar
	{
	position:relative;
	padding-left:10px;
	background-color: transparent;
	}
span.bar-triangle > span.triangle
	{
	background-color: transparent;
	position:relative;
	left: -0.40ch;
	}
span.triangle-bar
	{
	display:inline-block;
	width: 1.82ch;
	}
span.triangle-bar > span.triangle
	{
	padding-right:0.24ch;
	background-color: transparent;
	}
span.triangle-bar > span.bar
	{
	position:relative;
	left: -0.60ch;
	background-color: transparent;
	}
div
	{
	font-family: Arial;
	line-height:452%;
	font-size:20
	}
div > span.char
	{
	background-color: yellow;
	font-size: 80px;
	}

<div>
    <span class='char bar-triangle'><span class='bar'>l</span><span class='triangle'>&#x2BC7;</span></span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char triangle-bar'><span class='triangle'>&#x2BC8;</span><span class='bar'>l</span></span>
</div>

span.bar-triangle
    {
    display:inline-block;
    width: 1.82ch;
    }

Этот код исправляет ширину bar-triangle прямоугольника. Изменение display на inline-block необходимо для исправления ширины.

span.bar-triangle > span.bar
    {
    position:relative;
    padding-left:10px;
    background-color: transparent;
    }

Этот код перемещает символ bar вправо, так что левое пространство становится больше. Параметр background-color установлен прозрачным, поскольку цвет фона задан в прямоугольнике bar-triangle.

span.bar-triangle > span.triangle
    {
    background-color: transparent;
    position:relative;
    left: -0.40ch;
    }

Этот код перемещает символ треугольника влево до касания вертикального угла влево.

span.triangle-bar
    {
    display:inline-block;
    width: 1.82ch;
    }

Что касается bar-triangle, этот код исправляет ширину прямоугольника triangle-bar.

span.triangle-bar > span.triangle
    {
    padding-right:0.24ch;
    background-color: transparent;
    }

Это увеличение кода вправо к левому и правому отступам равно, а составной символ продолжает центрироваться в triangle-bar прямоугольник.

span.triangle-bar > span.bar
    {
    position:relative;
    left: -0.60ch;
    background-color: transparent;
    }

Этот код сдвигает вертикальную черту влево, так что угол вправо касается вертикальной черты.

div
    {
    font-family: Arial;
    line-height:452%;
    font-size:20
    }

Этот код устанавливает семейство шрифтов.
The * Параметр 1045 * используется для увеличения высоты прямоугольника составного символа. Параметр font-size используется для исправления разрыва между желтым прямоугольником.

div > span.char
    {
    background-color: yellow;
    font-size: 80px;
    }

Этот код задает цвет фона прямоугольника кнопки и размер символа, отображаемого в прямоугольниках.

Параметр line-height не используется, мы получаем следующий результат

Возможно, существует другое решение, чтобы избежать использования line-height, но я его не нахожу.

Другая возможность - заменить <span class='char'> на <div>.