css - 使用 CSS 交换 XML 元素中的文本

Question

我有一个如下所示的 XML。我需要将 的文本显示为第一个，将 的文本显示为第二个。

XML:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="sample.css"?>
<names>
<contributor><name>
<surname>Surname1</surname>
<given-names>Given-names1</given-names>
</name>
<xref><sup>1</sup></xref></contributor>
<contributor><name>
<surname>Surname2</surname>
<given-names>Given-names2</given-names>
</name>
<xref><sup>2</sup></xref></contributor>
</names>

例如，我需要如下所示的输出:

输出

Given-names1 Surname1 1,
Given-names2 Surname2 2

我尝试了下面的 CSS。我无法使用 CSS 交换元素中的文本。有什么选择吗？请建议

CSS 尝试:

sup{vertical-align: super; font-size: 80%;}
contributor:after{content:",";}
contributor:last-child:after{content:"";}
surname{display:inline-block; text-align:right;padding-left:90px;}
given-names{display:inline-block; text-align:left;position:absolute;}

Answer 1

一种可能的方法是将布局方向设置为从右到左。这需要小心，因为 direction property有点棘手。实际上，您可以通过为 name 元素设置 forced RTL 方向并为其子元素和父元素设置强制 LTR 方向来粗暴地覆盖正常的方向性规则。示例 CSS 代码:

contributor { display: block; }
given-names { padding-right: 0.25em; }
name { direction: rtl; unicode-bidi: bidi-override; text-align: left; }
contributor, surname, given-names { direction: ltr; unicode-bidi: bidi-override; }
contributor:not(:last-child):after { content: ",";}
sup { vertical-align: super; font-size: 80%; }

我假设，根据问题文本和其中的代码的组合，您希望 sup 元素呈现为在它们之前留出一些空间，以上标样式和缩小的字体尺寸。当然，这部分对于提出的问题不是必不可少的。

有许多不同的方法，但没有真正令人满意的方法，因为这不是 CSS 设计的目的。该工作可能更适合服务器端脚本、单独的转换或文档生成程序或 XSLT。