Как сделать знак системы в html?

Question

Нужно сделать на странице систему. Пример:

и много других.

Вставлять картинки не подходит. Как это сделать хотя бы на HTML и CSS?

Answer 1

Точно не знаю как написать это в виде кода, однако раньше пользовался MathJax

Попробуйте его - http://www.mathjax.org/

Answer 2

.system {
  display: grid;
  grid-template-columns: 20px calc(100% - 20px);
  grid-template-rows: repeat(2, 30px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  font-family: "Cambria Math";
  font-weight: 400;
}

.s1 {
  grid-area: 1 / 1 / 3 / 2; 
  font-size:  42px;
  justify-self: start;
  align-self:   center;
}
.s2 { 
  grid-area: 1 / 2 / 2 / 3;
  justify-self: start;
  align-self:   center;
  padding-left: 5px;
}
.s3 { 
  grid-area: 2 / 2 / 3 / 3; 
  justify-self: start;
  align-self:   center;
  padding-left: 5px;
}

<div class = 'system'>
<div class = 's1'>{</div>
<div class = 's2'>ax<sup>2</sup> + by<sup>2</sup> = c</div>
<div class = 's3'>dx<sup>3</sup> - ey<sup>-1</sup> = f</div>
</div>

Answer 3

Как пример для нечастого использования:

i {
  float: left;
  font-style: normal;
  font-size: 40px;
  padding-right: 5px;
}

u,
span {
  display: block;
  font-size: 22px;
  text-decoration: none;
}

<div><i>{</i><u><span>x &gt; a</span><span>x &lt; b</span><u></div>

Answer 4

div {
  font-size: 16px;
  line-height: 20px;
}

div::before {
  content: "{";
  float: left;
  font-size: 40px;
  line-height: 40px;
  margin-top: -2px;
}

<div>
  <var>x</var> &gt; <var>a</var><br>
  <var>x</var> &lt; <var>b</var>
</div>

Answer 5

Если у Вас планируется больше парочки "формул" есть смысл использовать MathJax. Что нужно? По сути, вы просто подключаете себе пару js файлов и можете прям в текст писать формулы. Единственное что понадобится - разобраться в синтаксисе (есть хорошая документация и полно статей напр. https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference).

Как подсказал @qwertiy, конкретно необходимый вам пример будет выглядеть так:

\left\{ \array{ x > a \cr x < b } \right.

пример: jsfiddle

БЛОГ НА HUSL

Как сделать знак системы в html?

Ответы (5 шт):