怎样设置文字右对齐 css

html-css08

怎样设置文字右对齐 css,第1张

CSS中设置文字右对齐可以通过代码:<p align="对齐方式">文本段落</p>来实现,操作步骤如下:

1.新建一个html文档,如下图红框所示;

2.可以给文档改个名字,如下图红框所示;

3.然后输入文字内容,如下图红框所示;

4.进一步设置以下文字的对齐方式,示例代码如下:<p align="right">孔雀为什么要东南飞?</p>;

5.在浏览器中预览,文字就实现了右对齐,如下图红框所示;

6.如果将对齐方式的代码改为“left”,如下图红框所示;

7.预览结果文字就实现了左对齐,如下图红框所示;

8.或者改成“center”,如下图红框所示;

9.文字的位置有变成了居中,如下图红框所示,总结如下:文字对齐方式有:left(左), center(中间), right(右),可以根据需求进行设置即可。

这里有一些临时的解决方案

1) 简单点的使用padding使其“看上去”对齐

比如: 这里比较适合宽度固定的场合,只要padding合适,效果还是不错的

select {

...

padding: 0 0 0 20px

}

2) 使用一些UI库实现

比如jQueryUI

优点是可以解决select控制在各个浏览器界面不一致的问题。

3) 居右对齐: 可以使用rtl属性来来控制,

<select dir="rtl">

<option>Foo</option>

<option>bar</option>

<option>to the right</option>

</select>

写成CSS的话则为:

select {

direction: rtl

}

最近项目适配阿拉伯,记录一下最近的工作内容。在此之前,我是没有了解过这方面的知识。

首先说说为什么要适配阿拉伯呢,是因为我们中文和英文这些是从左往右显示的语言,但是阿拉伯的语言是从右往左显示(RTL),恰好与我们的习惯相反,刚开始的时候实在很别扭,

首先在适配的项目的开始,我查找了一下网上的资料

感谢这几位大佬的博客:

https://blog.csdn.net/a657651096/article/details/102805114

https://www.jianshu.com/p/042f3db234ad

https://www.jianshu.com/p/3383ca5f6de0

我的项目是OC开发,布局用的masonry。

先来捋一下阿拉伯适配需要做哪些事情呢。

1阿拉伯从右往左显示,我们所有的约束需要更换。

2所有的UIView的处理

3带方向的图片处理

4手势的处理

5文字显示方向TextAlignment(大部分是UILabel)

6UIEdgeInsets(UIButton)

7富文本AttributeString

8Unicode文字的处理

9UICollectionView的处理(水平方向的)

10UIScrollView的处理(水平方向)

我们先来看一组效果图:

这是在中文下的效果

这是阿拉伯下的效果

列了一下需要处理的问题列表,接下来就是解决问题的具体方案了:

我写了一个公共的宏定义判断是不是阿拉伯语言,这个地方可以根据不同的需求做判断

1将所有的left更换成leading,right更换成trailing,这至少解决了50%的问题。是不是非常简单NO NO NO ~~

全部UIView处理

iOS9之后,苹果出了API适配RTL

UIView有一个semanticContentAttribute的属性,当我们将其设置成UISemanticContentAttributeForceRightToLeft之后,UIView将强制变为RTL布局。当然在非RTL语言下,我们需要设置它为UISemanticContentAttributeForceLeftToRight,来适配系统是阿拉伯语,App是其他语言不需要RTL布局的情况。

项目中有无数个UIView,是不是需要我们一个一个去设置呢,当然不是,这时候大家想到的是不是hook一下UIView的方法,来达到效果呢,好像是不行的呢,原因可以看我前面提到的三位的博客,我在appdelegate里面统一设置的,当我们设置UIView的semanticContentAttribute以后,发现UISearchBar还没有改变,那我们再设置一下UISearchBar

处理带方向的图片,这个部分有两种方式可以处理,要么让UI切两套图,分别展示,或者是把图片翻转一下,当然,图片不能带文字,这里得多说一句,经过这一次的教训,我发誓以后再也不要用带文字的图片了,如果只是带方向的图片,翻转就行了,但是图片带文字那就玩不转了,只能用几套图,还有国际化的时候,图片带文字,也不好处理,很不幸,我项目中很多带文字的图片,我只能一个一个去修改,言归正传,先来看一下处理带方向图片处理:

给UIImage写了一个分类,添加了一个方法,在方法里面判断是不是阿拉伯语,如果是翻转了图片,翻转图片的方法用的系统自带的。

这样子在带方向的地方使用这个方法,就可以了

手势的处理

滑动返回

RTL下,除了布局需要调整,手势的方向也是需要调整的

正常的滑动返回手势是右滑,在RTL下,是需要变成左滑返回的。为了让滑动返回也适配RTL,我们需要修改navigationBar和UINavigationController.view的semanticContentAttribute。使用[UIView appearance]修改semanticContentAttribute并不能使手势随之改变,我们需要手动修改。为了让所有的UINavigationController都生效。我们hook了UINavigationController的initWithNibName:bundle:

其他手势

跟方向有关的手势有2个:UISwipeGestureRecognizer和UIPanGestureRecognizer

UIPanGestureRecognizer是无法直接设置有效方向的。为了设置只对某个方向有效,一般都是通过实现它的delegate中的gestureRecognizerShouldBegin:方法,来指定是否生效。对于这种情况,我们只能手动修gestureRecognizerShouldBegin:中的逻辑,来适配RTL

UISwipeGestureRecognizer有一个direction的属性,可以设置有效方向。为了适配RTL,我们可以hook它的setter方法,达到自动适配的目的:

UIButton的RTL适配

UIButton的imageEdgeInsets和titleEdgeInsets。正常的时候,我们设置一个titleEdgeInsets的left。但是当RTL的情况下,因为所有的东西都左右镜像了,应该设置titleEdgeInsets的right布局才会正常。然而系统却不会自动帮我们将left和right调换。我们需要手动去适配它。

TextAlignment

RTL下textAlignment也是需要调整的,官方文档中默认textAlignment是NSTextAlignmentNatural,并且NSTextAlignmentNatural可用自动适配RTL

然而,情况并没有文档描述的那么好,当我们在系统内切换语言的时候,系统经常会错误的设置textAlignment。没有办法,我们只有自己去适配textAlignment.

以UILabel为例,我们hook它的setter的方法,根据当前是否是RTL,来设置正确的textAlignment,如果UILabel从未调用setTextAlignment:,我们还需要给它一个正确的默认值。

富文本AttributeString和Unicode字符串

以UILabel为例,对于AttributeString,UILabel的textAlignment是不生效的,因为AttributeString自带attributes。为了让attributeString也能自动适配RTL。我们需要在RTL下,将Alignment的left和right互换。

attributeString的alignment一般使用NSMutableParagraphStyle设置,所以我们首先hook NSMutableParagraphStyle,在setAlignment的时候设上正确的alignment:

由于阅读习惯的差异(阿拉伯语从右往左阅读,其他语言从左往右阅读),所以字符的排序是不一样的,普通语言左边是第一个字符,阿拉伯语右边是第一个字符。

如果是单纯某种文字,不管是阿拉伯语还是英文,系统都是已经帮助我们做好适配了的。然而混排的情况下,系统的适配是有问题的。对于一个string,系统会用第一个字符来决定当前是LTR还是RTL。

那么坑来了,假设有一个这样的字符串@"小明بدأ في متابعتك"(翻译过来为:小明关注了你),在阿拉伯语的情况下,由于阅读顺序是从右往左,我们希望他显示为@"بدأ في متابعتك小明"。然而按照系统的适配方案,是永远无法达到我们期望的。

如果"小明"放前面,第一个字符是中文,系统识别为LTR,从左往右排序,显示为@"小明بدأ في متابعتك"。

如果"小明"放后面,第一个字符是阿拉伯语,系统识别为RTL,从右往左排序,依然显示为@"小明بدأ في متابعتك"。

为了适配这种情况,可以在字符串前面加一些不会显示的字符,强制将字符串变为LTR或者RTL。

在字符串前面添加"\u202B"表示RTL,加"\u202A"LTR。为了统一适配刚刚的情况,我们hook了UILabel的setText:方法。当然这种方法没法适配所有的情况,项目中具体的场景还得具体处理。

以上是常见的适配了,接下来说两个特殊的

UICollectionView在RTL下的适配

继承UICollectionViewFlowLayout 重写两个方法

最后UIScrollView在RTL适配

普通的UIScrollView可以通过把UIScrollView的transform和scrollView的subviews翻转一下

我项目中太多的地方用到了UIScrollView,因为我们的UI设计,有非常多的分页控制器,所以我们项目中使用JXCategory搭配UIScrollView。

在使用的过程中遇到一个小问题,例如ScrollView加载三个不同的view,每个view的宽度都是屏幕的宽,这在RTL下有个问题,就是有view不显示,我从左往右适配的时候,右边的不显示,从右往左适配,左边的不显示,后来我使用了一种比较愚蠢的方法。最左的view从左适配,最右的View从右适配

我的RTL适配之路暂时就到这里了,希望未来有更好的方案出现。不安的2020即将完毕,祝愿2021是温暖的一年。