Question

我有以下HTML代码，使用从左到右书写和可读的语言，英语：

toolbar = (Toolbar) findViewById(R.id.app_bar);
toolbar.setNavigationIcon(R.drawable.ic_menu_white);
setSupportActionBar(toolbar);

mDrawer = (NavigationView) findViewById(R.id.navigation_drawer);
if (mDrawer != null) {
    mDrawer.setNavigationItemSelectedListener(this);
}

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

我必须翻译成＆＃34;从右到左＆＃34;语言。抛开blah的翻译，我首先做了以下事情：我在第一行之后添加了以下行：

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="site.css">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="page">
    <div id="banner"></div>
    <div id="tagline">blah blah blah</div>
    <div id="menu">
    <div id="innermenu">
        <div class="menuitem activeitem"><a href="somepage1.html">blah</a></div>
        <div class="menuitem"><a href="somepage2.html">blah</a></div>
        <div class="menuitem"><a href="somepage3.html">blah</a></div>
        <div class="menuitem"><a href="somepage4.html">blah</a></div>
        <div class="menuitem"><a href="somepage5.html">blah</a></div>
        <div class="menuitem"><a href="somepage6.html">blah</a></div>
    </div>
    </div>
    <div id="main">
    <div id="languagebar" class="mainelement">
        <a href="somepage1.html"><img src="french.png" alt="french" height="4" width="6" id="french" class="flag" /></a>
        <a href="somepage1.html"><img src="english.png" alt="english" height="4" width="6" id="english" class="flag" /></a>
    </div>
    <div id="content" class="mainelement">
        <h1>blah</h1>
        <p>blah blah blah</p>
        <h1>blah</h1>
        <p>blah blah blah</p>
        <h1>blah</h1>
        <p>blah blah blah</p>
    </div>
    </div>
    <div id="footer">blah blah blah</div>
</div>
</body>
</html>

其中XX是从右到左语言的双字母HTML面额。这增加了预期的行为：语言栏确实在右边，而mainelement＆＃34; table＆＃34;在它的左边，但由于一些blah的翻译太长，他们被langage酒吧所取代。然后我尝试了其他的东西：我删除了

<html dir="rtl" lang="XX">

行并执行以下操作：我替换了所有

<html dir="rtl" lang="XX">

和

<h1>...</h1>

分别来自mainelement

<p>...</p>

和

<h1><blockquote dir="rtl" lang="XX">...</blockquote></h1>

将文本从右到左很好地放置，然后我想管理右侧的语言栏和左侧的mainelement，但没有成功。我做错了什么？

修改

css代码如下

<p><blockquote dir="rtl" lang="XX">...</blockquote></p>

Answer 1

您应该将包含rtl lang的文本换成一个div，然后将dir='rtl'分配给它。

之后，您可以使用以下选择器添加自定义样式：

html[dir="rtl"] {
  /* css */
}

如果您使用的是margin或padding，则会自动翻转这些属性：

margin: 15px 10px 5px 20px; 
/* turns into */
margin: 20px 5px 10px 15px;

您可以在W3.org Tutorials about Right to Left Sites内找到大量有关此内容的信息。

Answer 2

我按如下方式进行：我创建了这个rtl.css文件：

body
{
direction: rtl;
unicode-bidi: embed;
}

#page
{
}

#banner
{
}

#tagline
{
}

#main
{
}

.mainelement
{
}

#main h1
{
}

#main div p, #main div li
{
}

#main a
{
}

#main .expandable
{
padding-right: 5px;
}

.underline
{
}

.italic
{
}

.inlineh1
{
}

#languagebar
{
float: right;
}

.flag
{
}

#french
{
float: right;
}

#english
{
float: left;
}

#content
{
float: left;
}

#footer
{
}

#footer a
{
}

/*** menu ***/

#menu
{
}

#innermenu
{
}

.menuitem
{
float: right;
}

.menuitem a
{
}

.activeitem
{
    background: url('menu-line.png') repeat-x bottom right;
}

.activeitem:before
{
    right: -6px;
    background: url('menu-ball.png') no-repeat bottom right;
}

.activeitem:after
{
    left: -6px;
    background: url('menu-ball.png') no-repeat bottom right;
}

/*** form ***/

input[type=text], textarea
{
}

input[type=submit]
{
}

input[type=submit]:active
{
}

并在所需的html中替换（即在语言XX中的html文件中）

<link rel="stylesheet" type="text/css" href="site.css">

与

<link rel="stylesheet" type="text/css" href="site.css">
<link rel="stylesheet" type="text/css" href="rtl.css">

从＆＃34;从左到右的问题转换＆＃34;到＆＃34;从右到左＆＃34;在HTML中

2 个答案: