Как отобразить дерево доказательств с помощью HTML, CSS и/или Javascript?

Question

Я хочу показать дерево доказательств в стиле естественного вычитания на веб-странице. Я получу данные из файла JSON.

Каков наилучший способ отображения чего-то подобного? Возможно ли только с помощью css? Или есть библиотека, которая может сделать что-то вроде этого? Рендеринг как изображение невозможно, потому что в итоге он должен быть интерактивным. Я также должен упомянуть, что это дерево может стать довольно большим.

Пример:

Обновление: Лучший пример того, что конечный результат должен выглядеть следующим образом:

Answer 1

Итак, после долгих возиться с css, я использовал таблицы, чтобы получить удовлетворительный результат. Поскольку макет действительно является частью семантики, я считаю его приемлемым в этом случае.

Небольшой пример будет выглядеть следующим образом:

<table> 
    <tr> 
     <td> 
     </td> 
     <td class="rulename" rowspan="2"><div class="rulename">add</div></td></tr> 
    <tr><td class="conc">conclusion</td></tr> 
</table> 

И в CSS:

td { 
text-align:center; 
height: 1em; 
vertical-align:bottom; 
} 
td.conc { 
border-top: solid 1px; 
} 
div.rulename { 
margin-top:-2em; 
} 

Bigger demo

Answer 2

Самым простым решением было бы mathjax, который является латексная Javascript рендерер. И есть немало других аналогичных вариантов рендеринга.

В качестве альтернативы вы также можете посмотреть MathML, который является стандартом w3c для написания математических уравнений. К сожалению, прямо сейчас поддержка для него совершенно отсутствует, как можно видеть here, но в долгосрочной перспективе это будет отличное решение. Кроме того, упомянутые выше MathJax могут использоваться как MathML shim в браузерах, которые еще не поддерживают MathML.

Единственная проблема с MathJax shim будет заключаться в том, что когда вы сделаете ее интерактивной, она будет взаимодействовать по-разному с вашим кодом в браузерах, которые делают и не поддерживают MathML, но, несмотря на это, я лично консультировал MathML, re уже связаны с LaTeX.

Основываясь на вашем обновлении, я не уверен, что это может быть выражено в MathML или LaTeX, и я боюсь, что единственное, что вы могли бы сделать, это нарисовать его на холсте или настроить его в SVG, если вам потребуется интерактивность позже , Но я могу предупредить, что вы уже знаете, что это не будет простой задачей, если вы не привыкли к этому.

---

Чтобы добавить интерактивности MathJax:

1. Использование MathML в качестве входных данных
2. Использование HTML/CSS в качестве выходного
3. Отключить контекстное меню MathJax путем добавления showMathMenu:false к вашей основной MathJax конфигурации
4. Включить идентификаторы в вашу разметку MathML (например, <mo id="someid">)
5. Используйте, например, jQuery для привязки к id после завершения MathJax (т. $("#someid").on("mousemove",function(){...}))

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

Answer 3

я наткнулся на то же самое в последнее время, и мне удалось написать несколько CSS который дает неплохие результаты, я думаю. Вот пример HTML скелет:

<div class="proof"> 
    <div class="prems"> 
     <div class="proof"> 
      <div class="prems"> 
       <div class="proof"> 
        <div class="prems"> 
         <div class="proof"> 
          <div class="concl"> 
           <div class="concl-left"></div> 
           <div class="concl-center">bla</div> 
           <div class="concl-right"></div> 
          </div> 
         </div> 
         <div class="inter-proof"></div> 
         <div class="proof"> 
          <div class="concl"> 
           <div class="concl-left"></div> 
           <div class="concl-center">bla</div> 
           <div class="concl-right"></div> 
          </div> 
         </div> 
        </div> 
        <div class="concl"> 
         <div class="concl-left"></div> 
         <div class="concl-center">bla</div> 
         <div class="concl-right"></div> 
        </div> 
       </div> 
         <div class="inter-proof"></div> 
       <div class="proof"> 
        <div class="concl"> 
         <div class="concl-left"></div> 
         <div class="concl-center">bla</div> 
         <div class="concl-right"></div> 
        </div> 
       </div> 
      </div> 
      <div class="concl"> 
       <div class="concl-left"></div> 
       <div class="concl-center">bla</div> 
       <div class="concl-right"></div> 
      </div> 
     </div> 
    </div> 
    <div class="concl"> 
     <div class="concl-left"></div> 
     <div class="concl-center">blabla</div> 
     <div class="concl-right"></div> 
    </div> 
</div> 

и вот CSS:

.proof 
{ 
    display: inline-flex; 
    flex-direction: column; 
} 
.prems 
{ 
    display: inline-flex; 
    flex-wrap: nowrap; 
    align-items: flex-end; 
} 
.inter-proof 
{ 
    border-bottom: 1px solid black; 
    width: 1em; 
} 
.concl 
{ 
    display: inline-flex; 
    margin-top: -1px; 
} 
.concl-left 
{ 
    flex-grow: 1; 
} 
.concl-center 
{ 
    border-top: 1px solid black; 
} 
.concl-right 
{ 
    flex-grow: 1; 
} 
.prems > .proof:not(:first-child) > .concl > .concl-left 
{ 
    border-bottom: 1px solid black; 
} 
.prems > .proof > .concl > .concl-center 
{ 
    border-bottom: 1px solid black; 
} 
.prems > .proof:not(:last-child) > .concl > .concl-right 
{ 
    border-bottom: 1px solid black; 
} 

увидеть его вживую here. Я только пытался с firefox, и для других браузеров могут потребоваться некоторые настройки.