英文:
How to make English text render right-to-left in mixed RTL <pre> tag?
问题
You can achieve the desired result by modifying the HTML structure and using CSS to position the elements differently. Here's the modified code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rtl {
direction: rtl;
font-size: 16px;
font-family: Arial, Helvetica;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div>
<b>Right Text</b>
</div>
<pre class="rtl">
שלום עולם ..... Left Text חמש
</pre>
</div>
</body>
</html>
This code places "Right Text" to the left of "שלום עולם" and "Left Text" to the right of "חמש," achieving the desired result.
英文:
I have the following code:
<html>
<head>
<style>
.rtl {
direction: rtl;
font-size: 16px;
font-family: Arial, Helvetica;
}
</style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>Right Text</b> ..... <b>Left Text</b> חמש
</pre>
</body>
</html>
JSFiddle: https://jsfiddle.net/xq809b4g/2/
Currently it renders "LeftText" left to שלום עולם, and "RightText" right to "חמש".
Usually, this makes sense, because when I embed English text in RTL text, I'd usually want it to display the English sentence Left-to-Right. However, in this case, because I'm writing a table of contents - The subjects should appear on the right, and the authors should appear on the left.
Can I make it render the opposite way, while still keeping the <pre> tag? In other words, "Right Text" should appear left to "שלום עולם", and "Left Text" right to "חמש".
Current State:
Desired result:
答案1
得分: 2
你应该使用 dir 属性。
使用 dir 属性时，可以使用以下值：
ltr，表示从左到右，适用于从左到右书写的语言。
rtl，表示从右到左，适用于从右到左书写的语言。
auto，让用户代理程序决定。它在解析元素内的字符时使用基本算法，直到找到具有强方向性的字符，然后将该方向性应用于整个元素。
<pre dir="auto">
שלום עולם <b dir="ltr">RightText</b> ..... <b dir="ltr">LeftText</b> חמש
</pre>
英文:
You should make the use of dir attribute.
When using dir attribute, you can use these values:
ltr, which means left to right and is to be used for languages that are written from the left to the right.
rtl, which means right to left and is to be used for languages that are written from the right to the left.
auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<pre dir="auto">
שלום עולם <b dir="ltr">RightText</b> ..... <b dir="ltr">LeftText</b> חמש
</pre>
<!-- end snippet -->
答案2
得分: 1
除了Newbee的出色答案外，在句点前后添加&rlm字符允许在句中改变文本方向。
英文:
In addition to Newbee's excellent answer, adding an &rlm character before and after the dots allows mid-sentence changing of the direction of the text.
<html>
<head>
<style>
.rtl {
direction: rtl;
font-size: 16px;
font-family: Arial, Helvetica;
}
</style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>Right Text</b> &rlm;.....&rlm; <b>Left Text</b> חמש
</pre>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论