[温故知新] Text-level semantics

em

The em element represents stress emphasis of its contents.

突出强调其内容(重读),重音位置不同语句的含义也会改变。

em不是一个通用的italics元素。如果想在语句中突出一段文字,以不同的感情和语调朗读,i元素更适用这种情况。

em元素也没有传递重要性。如果想表达重要性,strong元素更合适。

strong

The strong element represents strong importance, seriousness, or urgency for its contents.

表示其内容有强烈的重要性、严重(肃)性、紧迫性。

重要性:strong元素可以用在结构性标题(heading)、说明性标题(caption)或段落中,用来将真正关键(really matter)部分与其他部分区别开来,比如详细解释文字、模式化文字(如:图片1)。

严重(肃)性:可以用在警告或提示上。

紧迫性:表示此部分内容要先于文档中的其他部分查看。

通过strong元素改变文字片断的重要程度,并不会改变语句的意义。

<h1>Chapter 1: <strong>The Praxis</strong></h1>

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

small

The small element represents side comments such as small print.

表示旁注,如附属细则(small print)。

注:附属细则一般表现为免责说明、警告、法律限制或版权说明,有时也用于归属、许可要求。

注:对于由em元素强调过的或由strong元素标记为重要的文本,small元素不会取消对文本的强调,也不会降低这些文本的重要性。

<dl>
<dt>Single room
<dd>199 € <small>breakfast included, VAT not included</small>
<dt>Double room
<dd>239 € <small>breakfast included, VAT not included</small>
</dl>

s

The s element represents contents that are no longer accurate or no longer relevant.

表示内容已不准确或不再相关。

注:s元素不适用于文档编辑。如要表示一段文字已从文档中删除,请使用del元素。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

cite

The cite element represents a reference to a creative work. It must include the title of the work or the name of the author(person, people or organization) or an URL reference, which may be in an abbreviated form as per the conventions used for the addition of citation metadata.

引述,表示对于一个作品的引用。必须包括作品的标题或作者名称(个人、民族或组织)或URL地址。

<p>In the words of <cite>Charles Bukowski</cite> -
<q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>

q

The q element represents some phrasing content quoted from another source.

引文,引用自其他源的措辞内容。如果存在引用源,则用cite属性标识。引文如果放在引号内,则无需使用q元素。

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="http://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

dfn

The dfn element represents the defining instance of a term.

表示一个术语定义实例,必须包括术语的释义。

The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.

i

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

使用另外一种语气和情感的文字片断,或者使用有别于正常的讲述方式来表明文字的不同质量,如分类名称、技术术语、另一种语言的惯用语、音译、西文船舶名等。

鼓励开发者考虑是否有比i元素更恰当的元素使用,比如em表明突出强调,dfn表示一个术语的定义。

Lemonade consists primarily of <i>Citrus limon</i>.

b

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

仅为吸引注意力,并不传达额外的重要性也不暗含语气和情感的变化。比如文档摘要中的关键词、综述中的产品名称、交互式文本驱动软件中的可操作词语、一篇文章的首段。

实在无其他元素可用时,再考虑使用b元素吧。(这样看来,bi更适合用来标记icon?)

Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.

u

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

简单理解为中文的专名号。生拼硬凑词语,非文本解释,中文专有名词,或拼写错误文字。

The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.

mark

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

标记和高亮显式与用户当前行为相关的内容。最常用的场景是用户搜索文档,将与搜索关键字相匹配的文字高亮显式。语法高亮,span更合适。

Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.

参考资料:

text-level-semantics

Retina显示屏下ICON优化方法

便于理解,先来了解几个名词:

  • dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率。一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分辨率,那么大屏幕比小屏幕的dpi小。
  • dip(device independent pixels),设备独立像素,与160 dpi显示屏上的1px相等, 又称dp。
  • dppx(dots per ‘px’),每px单位上的点数。由于CSS英寸与CSS像素的固定比是1:96,那么1dppx=96dpi。
  • Device pixel ratio (DPR)是物理像素与CSS像素的比率。

方法一:media queries & background-size

查看demo

/*
** 注意:background-size的值是sprite.png的尺寸,而不是每个icon的尺寸
*/
.sprite-icon{
    background-image:url(sprite.png);
    background-size:98px 65px;       
}

/*
** 每个icon的background-positon只需写一次,即icon相对与1x图片的位置,在@2x图片中的位置也是这个
*/
.icon-1{
    background-position:0 0;
}
.icon-2{
    background-position:-33px 0;
}
.icon-3{
    background-position:-66px 0;
}
.icon-4{
    background-position:0 -33px;
}
.icon-5{
    background-position:-33px -33px;
}
.icon-6{
    background-position:-66px -33px;
}

/* 
** 2x图片要是1x图片的准确2倍
** sprite中图标之间的间隙,也应是2倍
** 每个图标无需重新写background-position
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */
{
    .sprite-icon{
        background-image:url(sprite@2x.png); 
    }  
}

方法二:background-image:img-set( url(a.png) 1x, url(a@2x.png) 2x )

媒体查询(media queries)已经可以解决高密度显示问题,为什么还需要image-set? 问的好。 使用image-set的两个主要好处:

  • 与媒体查询不同的是,image-set没有告诉浏览器使用哪个图片,而是提供了一些选项。我希望将来在低网速下使用高密度设备,能够告诉浏览器使用低分辨率图片。如果浏览器能够根据当前的网络状况智能地选择使用的图片,那就更好了。 媒体查询的问题是没有给浏览器任何自由裁决权,它明确的指明,如果像素密度大于1或者2,浏览器就使用特定的图片。 我知道,这只是理论上(更是“意淫“出来)的好处。如今支持“image-set”的浏览器只是简单将图片源与显示密度相匹配,并没有提供额外的功能。但我坚信,同一张图片需要不同分辨率时,让浏览器去选择合适的图片是方向。
  • CSS编码好处:将不同分辨率的图片源集中在一起。

查看demo

/* ** 注意: ** 图片要求:2x图片要是1x图片的准确2倍,sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ 
.sprite-icon{ 
    background-image:url(sprite.png); 
    background-image: -webkit-image-set( url('sprite.png') 1x, url('sprite@2x.png') 2x ); 
}

/* ** 每个icon的background-positon只需写一次,即icon相对与1x图片的位置,在@2x图片中的位置也是这个 */ 
.icon-1{
     background-position:0 0; 
} 
.icon-2{ 
    background-position:-33px 0; 
} 
.icon-3{ 
    background-position:-66px 0; 
} 
.icon-4{ 
    background-position:0 -33px; 
} 
.icon-5{ 
    background-position:-33px -33px; 
} 
.icon-6{ 
    background-position:-66px -33px; 
}

方法三: media queries & background-size,适用于仅部分图标提供了2x图,且icon位置不对应,可能是由工具生成的sprite。

查看demo

.sprite-icon{
    background-image:url(more.png);
}
.icon-1{
    background-position:0 0;
}
.icon-2{
    background-position:-33px 0;
}
.icon-3{
    background-position:-66px 0;
}
.icon-4{
    background-position:0 -33px;
}
.icon-5{
    background-position:-33px -33px;
}
.icon-6{
    background-position:-66px -33px;
}
.icon-7{
    background-position:0 -66px;
}

/* 
** 每个icon的backgroud-size是2x图片的一半
** 每个icon的backgroud-position是相对与2x图片的位置除以2
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */
{
    .icon-1{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:0 0;
    }
    .icon-2{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-33px 0;
    }
    .icon-3{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-66px 0;
    }
    .icon-4{
        background-image:url(portion@2x.png);
        background-size:197px 65px;
        background-position:-99px -33px;
    }
    .icon-5{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-132px -33px;
    }
    .icon-6{
        background-image:url(portion@2x.png);
        background-size:197px 65px;
        background-position:-165px -33px;
    }

}

one-device-pixel border


2014-12-31更新:
截至到IOS8.1,safari仍不支持@supports
待safari支持@supports, 就可以利用0.5px了!


2014-7-25更新:
1. 修正dpr = 1.5 机器下四角边框的缩放比例;
2. 修正右边框(rBor)的transform-origin为100%, 100%;
3. 添加对 dpr = 3 机器的支持; 通过以下机器验证:小米1(dpr = 1.5)、SAMSUNG S3(dpr = 2)、NEXUS 5(dpr =3) 测试地址:

Snip20140726_16


移动web开发,总避免不了1设备像素边框的问题。本文参考了half-point css border in ios 一文。

理想的

div{
   border:1px solid black;
}

@media (-webkit-min-device-pixel-ratio: 2){
 div{
    border-width:0.5px;
 }
}

仅有 Firefox和Safari 8 (introduced in OS X Yosemite)支持。twitter有位哥们听到这个消息时,已经不知所云。

psb

现实的

原理简单介绍:content属性与:before 及:after 伪元素配合使用,来插入生成内容,即所需边框。使用transform scale方法将生成内容的边框(或高度或宽度),缩小至合适大小(如0.5倍)。另外,处理好transform-origin值至关重要,下图可以帮助你更好地理解origin值。 transform-15 查看代码或查看此gist,并奉上demo继续阅读one-device-pixel border

使用copy声明NSString属性

声明一个NSString属性使用copy要优于使用strong。这同样适用于遵守NSCoding协议的不可变类(immutable class),如NSNumber、NSArray、NSSet等。上面提到的这些类都有一个可变(mutable)的版本。选择使用copy的理由是,NSString属性可能被传入一个NSString实例,也可能是一个NSMutableString实例。当传入了一个NSMutableString实例时,字符串的值可能会在背后悄悄变化。来瞧瞧这个例子:

@interface Book : NSObject
@property (strong, nonatomic) NSString *title;
@end

在另一个类中,我们有一个这样的方法:

- (void)stringExample {
 NSMutableString *bookTitle = [NSMutableString stringWithString:@"Best book ever"];
 
 Book *book = [[Book alloc] init];
 book.title = bookTitle;

 [bookTitle setString:@"Worst book ever"];
 NSLog(@"book title %@", book.title);
}

运行后会发现,图书的标题是“Worst book ever”。如果我们更改为使用copy声明title属性,图书的标题变为了“Best book ever”,这也是我们想要的结果。在第一种情况下,我们使用strong声明该属性,字符串的retain计数将增加1,属性与字符串指向同一个内存地址。这意味着任何指向这个内存地址的变量都可改变这个值,本例中bookTitle变量的值改变后,title属性值也跟随变化。如果改用copy的话,则会为Book类创建一个字符串副本。也就是说修改booTitle,不再会影响字符串副本值,这是多数情况下我们想要的结果。

———————————————————————————–

翻译自:Use copy for NSString properties

IOS编程101:关闭输入键盘

使用UITextField、UITextView和UISearchBar完成输入时,按Return / Done 键隐藏键盘是很好的做法。另外,用户触摸键盘外空白区域隐藏键盘也是用户期望的行为。

Return键隐藏键盘

通过实现 UITextFieldDelegate 协议的可选方法textFieldShouldReturn: 来实现 Return 隐藏键盘。 因此,在头文件中添加协议的声明:

#import <UIKit/UIKit.h>
@interface jaceViewController : UIViewController <UITextFieldDelegate>

使用storyboard将jaceViewController设为textfield(nickname)的代理:

Snip20140527_3

在实现文件(jaceViewController.h)中实现方法:

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
 [textField resignFirstResponder];
 return YES;
}

Done 键隐藏键盘

我们将住址的Return key 设为「Done」,并将address的didEndOnExit事件与onDidEndOnExit连接:

Snip20140527_8

- (IBAction)onDidEndOnExit:(id)sender
{
 [sender resignFirstResponder];
}

触摸键盘外空白区域隐藏键盘

需要监听屏幕上的touch事件,覆盖UIResponder的这个方法:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
 [self.view endEditing:YES];
 [super touchesBegan:touches withEvent:event];
}

通用方法

利用responder chain原理。

- (IBAction)dismissKeyboard:(id)sender{
 [[UIApplication sharedApplication] sendAction:@selector(resignFirstResponder)
 to:nil
 from:nil
 forEvent:nil];
}

你可以与任何视图的相应事件连接,实现隐藏键盘,比如最底层添加一个与屏幕等大的button,Touch Up Inside时向button发送此方法,也可实现点击键盘外空白区域隐藏键盘的特性。

Snip20140527_9

下载此项目

参考资料:

1.iOS tutorial: hide keyboard after return / done key press in UITextField

2.UIKit: Hide the keyboard without a reference to the currently focused text field

3.textField のキーボード非表示に関するメモ

4.关闭ios虚拟键盘的几种方法

iOS编程101:如何创建圆形头像和圆角图片

IOS7的一个变化是相对于方形图像,更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像,如联系人和电话应用。这篇短文中,我们将探讨CALayer类,以及如何运用它来创建圆形图像或圆角图像。

您可能并没有听说过CALayer类。但是,如果你曾经创建过应用程序,那么你应该以某种方式使用过它。UIKit中的每个视图(例如UIView、UIImageView)都备份在一个CALayer类的实例中(即layer对象)。layer对象用来管理视图的备份存储和处理视图相关的动画。
layer对象提供了多种属性,使用它们来控制视图的可视内容:

  • 背景颜色
  • 边框和边框宽度
  • 阴影颜色,宽度等
  • Opacity(不透明度)
  • 圆角半径

Corner radius就是我们用来绘制圆角和圆形图像的属性。

circular-image-featured
与往常一样,了解CALayer是如何工作的最好方法就是使用它。我们将创建一个带有圆形用户头像的简单的profile视图。

快速了解演示项目

首先,下载此项目模板。已经预先创建了profile视图,但编译并运行应用程序时你会发现用户头像是方形的。这个演示项目非常简单,只有一个类ProfileViewController,与storyboard中的视图相关联。

同时,将用户头像图像(UIImageView)与ProfileViewController.h中的profileImageView属性关联起来。

square-corner-image-profile

创建圆形用户头像

接下来,让我们看看如何通过改变圆角半径,使用户头像转换成一个圆形图像。

打开ProfileViewController.m,并在viewDidLoad:方法中添加下面几行代码:

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
self.profileImageView.clipsToBounds = YES;

每一个视图,都有一个捆绑的layer属性。所以上面的第一行是设置layer对象(CALayer类的一个实例)的圆角半径。将方形图像变成圆形图像,半径应设置为UIImageView宽度的一半。例如,如果方形图像的宽度是100像素。半径应设置为50像素。其次,你必须将clipsToBounds属性设置为YES,这样layer才能生效。

现在编译和运行应用程序,你会得到一个圆形头像。

circular-image-profile

非常容易吧。只需两行代码,图像从方形变为圆形。无需Photoshop。

添加边框

接下来,我们给头像添加边框使它更漂亮点。同样,也只需要两行。在viewDidLoad:方法中,在设置圆角半径的代码后面加入以下两行代码:

self.profileImageView.layer.borderWidth = 3.0f;
self.profileImageView.layer.borderColor = [UIColor whiteColor].CGColor;

我们只是设置了边框的宽度和边框颜色。再次编译并运行应用程序,您现在应该看到一个拥有白色边框的头像。

创建圆角图片

你可以使用同样的方法来创建圆角图像。关键是要改变圆角半径,并将其设置为其他值。比如设置半径为10:

self.profileImageView.layer.cornerRadius = 10.0f;

用户头像现在应该是圆角的了。

square-corner-image-profile

在这里下载完整的Xcode项目,供大家参考 。

——————————————————————-

翻译自:iOS Programming 101: How To Create Circular Profile Picture and Rounded Corner Image

连续文本CSS处理方法

好久没有写博客了,把老文章发出来!

1.问题描述

在宽度有限的情况下,CJK文本和常规西文单词在遇到容器边界时通常会自动换行显示。

image001

图1 文字自动换行(查看多语种文本自动换行DEMO)

但是长连续文本(如连续字母、连续数字、URL等)会撑破容器在单行内显示,如图2。为了解决这个问题,我们通常会使用样式:word-wrap: break-word(当内容超过容器边界时是否断开转行),效果见图3。

image003

图2 长连续文本撑破容器单行显式

 

image005

图3 长连续文本自动换行(使用word-wrap:break-word 后)

图4显示的是长连续字符与其他常规单词或汉字混排时的表现,这也是测试同事经常用来检测样式表现的用例。通常情况,测试同事会指出连续文本应当紧跟在汉字或短单词的后面显示,即图5显示的效果。为了实现这个效果,我们可以使用word-break: break-all(控制文本的字内换行行为)来解决,这也是原来的Qzone Feeds中使用的方法。

image007

图4 中文、常规单词与长连续文本混排

 

image009

图5 中文、常规单词与长连续文本混排(使用word-break:break-all 后)

但这会造成展现效果不符合排版规则:

(1)常规单词在不恰当位置断字,如图6。

在行尾的单词由于太长而无法完全放下时,使用了该属性后单词会在行尾的字母处断开,并没有遵循断字规则。不同书写系统的断字规则不尽相同,西文的断字通常是在音节处断字,并在行尾使用连字符连接。如Congratulation的可断字点包括:

Con-grat-u-la-tion

从图6可以看出每行行尾的单词都被非恰当断字,严重影响了内容的连续阅读。

image011

图6 英文单词在非恰当处断字

 

(2)标点符号可能出现在不当位置,影响美观。

前置标点(不允许出现在行末的标点):

$([{£¥•‘“〈《「『【〔〖〝﹙﹛﹝$(.[{£¥

后置标点(不允许出现在行首的标点):

!%),.:;>?]}¢¨°•ˇˉ―‖’”…‰′″›℃∶、。〃〉》」』】〕

〗〞︶︺︾﹀﹄}])!"%'),.:;?)`|)~¢

image013

图7 标点符号不符合排版规则

2.长URL处理

Feed的评论中可能会有链接出现,在去除word-break:break-all后,文字和url之间可能会出现较大的空隙,如图8。针对这种情况,我们可以只对评论内的url做word-break:break-all处理。

image015

图8 文字与长URL之间有较大间隙

3.结论

为了保证常规文本的阅读体验,建议对常规文本不使用word-break:break-all,链接特殊处理,将图4的效果视为正常表现。

利用css @viewport 做设备适配

在需要调整设备浏览器的viewport时,我们通常在HTML中使用来解决。但是令人意想不到的是,viewport meta标签并不具有“规范性”,即它不是W3C的正式标准,也非Web标准。

Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率,使得viewport meta标签被广泛使用。

viewport meta标签是用做布局的,这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的设备适配方法的原因,将HTML对viewport的控制转交给CSS。

@viewport CSS 规则

使用@viewport规则控制viewport,与使用meta标签的效果相同,只是我们完全使用CSS来控制。与使用meta标签一样,仍然建议使用设备无关的值(device-width)来设置viewport宽度。

@viewport {
   width: device-width;
}

如今,也有很多开发者已经在使用@viewport了,因为在IE10的捕捉模式(snap mode)下,Windows 8 Metro模式下的一个特性,可以将浏览器拖至屏幕的左端或右端,同时使用两个窗口。奇怪的是,在viewport小于400px的时候,IE10忽略了viewport meta标签,所以依赖meta标签的站点,在这种小窗口下是没有优化效果的。要解决这个问题,开发者就要使用上面介绍的device-width方法,或者在media query里面使用@viewport规则。

@viewport 与 Media Queries配合使用

我们可以在media query里面使用@viewport,已达到更加精准的优化。比如,下面的media query将viewport小于400px(IE10 的 捕捉模式)缩放至320px宽。

@media screen and (max-width: 400px) {
   @-ms-viewport { width: 320px; }
   ...
}

@viewport 描述符(Descriptors)

zoom描述符等同于viewport meta 标签的initial-sacale属性。

@viewport {
   width: device-width;
   zoom: 2;
}

与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。

@viewport {
   width: device-width; 
   max-zoom: 3; 
   min-zoom: 0.50; 
}

user-zoom与user-scalable属性等效。

@viewport {
   width: device-width;
   user-zoom: fixed;
}

浏览器支持情况

仅IE10/11 , opera 已支持,且需要厂商前缀。

@-ms-viewport {
   width: device-width;
}
@-o-viewport { 
   width: device-width;
}
@viewport {
   width: device-width; 
}

所以,目前我们还是需要viewport meta 标签。

后记

用此方法可以解决 Windows Phone IE浏览下, 定位在底部(bottom:0)的元素与底部有间距的问题。

参考:

  1. Thinking Ahead: CSS Device Adaptation With @viewport
  2. http://getbootstrap.com/getting-started/#browsers
  3. Windows Phone 8 and Device-Width