[发明专利]显示方法及显示系统

说明书

本公开提供了一种显示方法，包括：获取父元素数据和子元素数据，其中，父元素数据用于生成待显示对象的背景，子元素数据用于生成至少包含文字信息的主体；从子元素数据中提取用于生成文字信息的第一子元素数据；复制第一子元素数据，得到第二子元素数据；以及在显示待显示对象时，通过第一子元素数据以隐藏形式生成文字信息以在背景中占位，并通过第二子元素数据生成在背景中垂直居中显示的文字信息。本公开还提供了一种显示系统，一种计算机系统和一种计算机可读存储介质。

技术领域

本公开涉及计算机技术领域，更具体地，涉及一种显示方法，一种显示系统，一种计算机系统和一种计算机可读存储介质。

背景技术

通常，在网页字体被设置为小于12px(像素，一种网站中用来表示大小的单位)的情况下，通过line-height这个属性设置“垂直居中”，Android系统浏览器渲染出来的效果标签中的文字并不是垂直居中的，而是会偏上一些，而ios系统浏览器并不存在这个问题，导致显示效果不一致。

针对上述缺陷，相关技术中提供了一些解决方案：

(1)在“文字”的父元素层面进行相关设置。如：通过line-height这个属性，设置合理的属性值即行高以使“文字”在效果标签中垂直居中；或者，先将display属性设置为table-cell样式，再将vertical-align属性设置为middle样式，从而使“文字”在效果标签中垂直居中；或者，先通过position设置absolute属性，再通过top控制高度，从而使“文字”在效果标签中垂直居中；或者，先将display属性设置为flex样式，在将align-items属性设置为center样式，从而使“文字”在效果标签中垂直居中。

(2)先通过特定的javascript判断当前浏览器是否是Android浏览器，然后再基于(1)提供的方案进行设置，从而使“文字”在效果标签中垂直居中。

(3)使用图片代替文字，以克服上述缺陷。

然而，在实现本公开构思的过程中，发明人发现相关技术中至少存在如下问题：方案(1)实际上是在Android系统浏览器和ios系统浏览器之间设计了一种折中的显示方案，只是稍有改善，并没有彻底解决垂直居中问题；方案(2)虽然能够解决垂直居中问题，但是需要增加javascript代码开发成本和维护成本；方案(3)虽然能够解决垂直居中问题，也无需增加javascript代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难。

发明内容

有鉴于此，本公开提供了一种能够使文字在显示标签中垂直居中显示的显示方法和显示系统。

本公开的一个方面提供了一种显示方法，包括：获取父元素数据和子元素数据，其中，所述父元素数据用于生成待显示对象的背景，所述子元素数据用于生成至少包含文字信息的主体；从所述子元素数据中提取用于生成所述文字信息的第一子元素数据；复制所述第一子元素数据，得到第二子元素数据；以及在显示所述待显示对象时，通过所述第一子元素数据以隐藏形式生成所述文字信息以在所述背景中占位，并通过所述第二子元素数据生成在所述背景中垂直居中显示的所述文字信息。

根据本公开的实施例，所述方法还包括：如果所述文字信息需要显示成小于预设字号的字体，则执行所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关操作。

根据本公开的实施例，所述方法还包括在显示所述待显示对象时：确定所述文字信息的字体实际需要显示成的字号；以及通过所述第二子元素数据，先以所述文字信息的字体实际需要显示成的字号的预定倍数，在所述背景中生成垂直居中显示的预定文字信息，再以所述文字信息的字体实际需要显示成的字号的预定倍数分之一，缩小所述预定文字信息的显示效果，并使缩小后的文字信息在所述背景中保持垂直居中显示状态。