从右到左方向在urdu字体上无法正常工作

时间:2020-05-30 10:41:28

标签: html css bootstrap-4

我在html标签(跨度)中有乌尔都语文字。乌尔都语从右到左书写,因此我应用了direction:rtl。但这似乎不起作用,因为在最后一行,它在右边留有空间。例子会更好地解释。

.r2l {
  direction: rtl;
}
<html>

<head>
</head>

<body>
  <span class='r2l'>خدا کرے کے میری عرض پاک پے اترے</span>
  <span class='r2l'>وہ فصل گل جسے </span>
  <span class='r2l'>اندیشہ زوال نہ ہویہاں جو پھول کھلے کھلا رہےصدیوں یہاں 
  سے خزاں کو گزارنے کی مجال نہ ہو</span>
  <span class='r2l'>یہاں جو سبزہ اگے ہمیشہ سبز رہے</span>
  <span class='r2l'>اور ایسا سبز کے جسکیکوئی مثال نہ ہوخدا کرے کے نہ خام 
   ہو سر وقار وطن اور اس کے حسن کو تشوش ماہ وسا ل نہ ہو ہر ایک فرد ہو 
   تہذیب و فن کا</span>
  <span class='r2l'> اوج و کمال کوئی ملول نہ ہو کوئی خستہ حال نہ ہوخدا کرے 
     میرے ایک بھی ہم وطن کے لئےحیات جرم نہ ہو، زندگی وبال نہ ہو</span>
</body>

</html>

如果运行该代码段并看到最后一行,则它不是从右开始,而是将空间留空。

修改 实际情况添加到html中,具有跨度的要点是我将属性附加到悬停显示的每个跨度(这是将文本添加到数据库中的时间)

3 个答案:

答案 0 :(得分:1)

rtl在import 'package:flutter/material.dart'; class CountriesButton extends StatefulWidget { const CountriesButton({Key key}) : super(key: key); @override _CountriesButtonState createState() => _CountriesButtonState(); } class _CountriesButtonState extends State<CountriesButton> { List<DropdownMenuItem<CountryOption>> _countryItems; CountryOption _selectedCountry; @override void initState() { // Get all countries List<CountryOption> countries = CountryOption.allCountries; // Initialise your items only once _countryItems = countries.map<DropdownMenuItem<CountryOption>>( (CountryOption countryOption) { return DropdownMenuItem<CountryOption>( value: countryOption, child: Text(countryOption.fullName), ); }, ).toList(); // Initialiste your dropdown with the first country in the list // (might be different in your specific scenario) _selectedCountry = countries[0]; super.initState(); } @override Widget build(BuildContext context) { return Container( child: DropdownButton<CountryOption>( isExpanded: true, underline: SizedBox(), icon: SvgPicture.asset("assets/icons/dropdown.svg"), value: _selectedCountry, items: _countryItems, onChanged: (newValue) { setState(() { _selectedCountry = newValue; }); }, ), ); } } class CountryOption { final String key; final String fullName; CountryOption(this.key, this.fullName); static List<CountryOption> get allCountries => [ CountryOption('nepal', 'Nepal'), CountryOption('india', 'India'), CountryOption('USA', 'United States'), CountryOption('denmark', 'Denmark'), CountryOption('uk', 'UK'), CountryOption('world', 'World Wide'), ]; } 标签上不起作用。这里的更多信息:Using <span> to add a direction (dir = "rtl")

<span><span>更改为</span><p>

答案 1 :(得分:1)

direction本身的属性可在块级元素上使用,span不是block

改为使用p标记

.r2l {
  direction: rtl;
}
<html>

<head>
</head>

<body>
  <p class='r2l'>خدا کرے کے میری عرض پاک پے اترےوہ فصل گل جسے اندیشہ زوال نہ ہویہاں جو پھول کھلے کھلا رہےصدیوں یہاں سے خزاں کو گزارنے کی مجال نہ ہویہاں جو سبزہ اگے ہمیشہ سبز رہےاور ایسا سبز کے جسکیکوئی مثال نہ ہوخدا کرے کے نہ خام ہو سر وقار وطن اور اس کے حسن کو تشوش ماہ وسا ل نہ ہو ہر ایک فرد ہو تہذیب و فن کا اوج و کمال کوئی ملول نہ ہو کوئی خستہ حال نہ ہوخدا کرے میرے ایک بھی ہم وطن کے لئےحیات جرم نہ ہو، زندگی وبال نہ ہو</p>
</body>

</html>

答案 2 :(得分:0)

我使用float:right解决了该问题。这并不能完全满足我的需要,但是我在我的方案中以某种方式工作。

.r2l {
  direction: rtl;
  float:right;
}
<html>

<head>
</head>

<body>
  <span class='r2l'>خدا کرے کے میری عرض پاک پے اترے</span>
  <span class='r2l'>وہ فصل گل جسے </span>
  <span class='r2l'>اندیشہ زوال نہ ہویہاں جو پھول کھلے کھلا رہےصدیوں یہاں 
  سے خزاں کو گزارنے کی مجال نہ ہو</span>
  <span class='r2l'>یہاں جو سبزہ اگے ہمیشہ سبز رہے</span>
  <span class='r2l'>اور ایسا سبز کے جسکیکوئی مثال نہ ہوخدا کرے کے نہ خام 
   ہو سر وقار وطن اور اس کے حسن کو تشوش ماہ وسا ل نہ ہو ہر ایک فرد ہو 
   تہذیب و فن کا</span>
  <span class='r2l'> اوج و کمال کوئی ملول نہ ہو کوئی خستہ حال نہ ہوخدا کرے 
     میرے ایک بھی ہم وطن کے لئےحیات جرم نہ ہو، زندگی وبال نہ ہو</span>
</body>

</html>