实现“命名定理"HTML/CSS 环境 [英] Implementing a "Named Theorem" environment in HTML/CSS

问题描述

在数学文档中，您经常会看到历史上重要的定理或命名定理与文档中的其余定理不同.

In mathematical documents you often see historically important or named theorems distinguished from the rest of the theorems in the document.

现在我已经对定理进行了编号:

Now I have numbered theorems implemented:

body {
  counter-reset: theorem;
}
p.theorem {
  display: block; 
}
p.theorem::before {
  counter-increment: theorem; 
  content: "Theorem " counter(theorem) " \2014 "; 
}

所以上面的内容几乎可以用:

So the above can almost be created with:

<p class="theorem">
  This is your typical theorem, probably proved by the author of 
  the current paper, and doesn't need any special decoration.
</p> 
<p class="theorem">
  This theorem is important enough to warrant attribution to its author and a 
  reference to the entry in the bibliography where the author proves this theorem.
</p> 

但是如何在网页上实现定理的这种命名/属性?天真地必须将一些参数 name 传递给您用于定理的标签，但我认为仅使用 HTML/CSS 是不可能的.如果这是可能的，如果 name 也可能是一个超链接，以链接到引用的作品，那就太好了.

But how can one implement this naming/attribution of a theorem on a webpage? Naively one would have to pass some parameter, the name, to the tag you're using for the theorem, but I don't think that's possible just with HTML/CSS. If this is possible, it would be nice if it's possible that the name be a hyperlink too, to link to the referenced work.

另请参阅有关像使用 LaTeX 一样引用定理的相关问题.

Also see this related question about referencing theorems like you can do with LaTeX.

推荐答案

您可以使用 attr() 从 CSS content 属性中引用元素属性的内容

You can reference the content of an element's attributes from within the CSS content property using attr()

body {
  counter-reset: theorem;
}
p.theorem::before {
  counter-increment: theorem; 
  content: "Theorem " counter(theorem) " \2014 "; 
}
p.theorem[data-attribution]::before {
  content: "Theorem " counter(theorem) " (" attr(data-attribution) ")  \2014 ";
}

<p class="theorem">This is your typical theorem, probably proved by the author of the current paper, and doesn't need any special decoration.</p>
<p class="theorem" data-attribution="Noether">This theorem is important enough to warrant attribution to its author and a reference to the entry in the bibliography where the author proves this theorem.</p>

这是一篇关于它的好文章:https://davidwalsh.name/css-content-attr

Here's a good article on it: https://davidwalsh.name/css-content-attr

但是，如果不添加一些 javascript，您将无法使其成为可访问的链接.在这一点上，从一开始就使用语义 HTML 标记内容可能是值得的——这必然更容易访问——使用如下模式:

However, you won't be able to make it an accessible link without adding some javascript to the mix. At that point, it may be worth just using semantic HTML to markup the content from the get-go—which is bound to be more accessible—using a pattern like:

.theorem {
    margin: 0 0 1em 0;
}
.theorem figcaption::after {
    content: " \2014 "
}
.theorem figcaption,
.theorem p {
    display: inline;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="theorem">
    <figcaption>Theorem 1</figcaption>
    <p>This is your typical theorem, probably proved by the author of the current paper, and doesn't need any special decoration.</p>
</figure>
<figure class="theorem">
    <figcaption>Theorem 2 (Noether [<a href="#">1</a>])</figcaption>
    <p>This theorem is important enough to warrant attribution to its author and a reference to the entry in the bibliography where the author proves this theorem.</p>
</figure>

这篇关于实现“命名定理"HTML/CSS 环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！