CN110874253B - 显示方法及显示系统 - Google Patents

Abstract

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

Description

显示方法及显示系统

技术领域

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

背景技术

通常，在网页字体被设置为小于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代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难。

发明内容

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

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

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

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

根据本公开的实施例，所述方法还包括在显示所述待显示对象时：基于所述父元素数据在所述背景中设置参考位置；以及在缩小所述预定文字信息的显示效果时基于所述参考位置进行缩小。

根据本公开的实施例，所述方法还包括：如果所述文字信息能够用文字表示，则执行所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关操作；以及如果所述文字信息无法用文字表示，则在显示所述待显示对象时，使用图片代替所述文字信息进行显示。

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

根据本公开的实施例，所述提取模块还用于：在所述文字信息需要显示成小于预设字号的字体的情况下，实现所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关功能。

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

根据本公开的实施例，所述第一显示模块还用于在显示所述待显示对象时：基于所述父元素数据在所述背景中设置参考位置；以及在缩小所述预定文字信息的显示效果时基于所述参考位置进行缩小。

根据本公开的实施例，所述提取模块还用于：如果所述文字信息能够用文字表示，则实现所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关功能；以及所述系统还包括：第二显示模块，用于如果所述文字信息无法用文字表示，则在显示所述待显示对象时，使用图片代替所述文字信息进行显示。

本公开的另一个方面提供了一种计算机系统，包括：一个或多个处理器；存储器，用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上所述的方法。

本公开的另一方面提供了一种非易失性存储介质，存储有计算机可执行指令，所述指令在被执行时用于实现如上所述的方法。

本公开的另一方面提供了一种计算机程序，所述计算机程序包括计算机可执行指令，所述指令在被执行时用于实现如上所述的方法。

根据本公开的实施例，因为采用了两份完全相同的子元素进行文字显示的技术手段，其中，一份子元素生成的文字信息用于在父元素生成的背景中占位，另一份子元素生成的文字信息能够悬浮在父元素生成的背景中，且在该背景中垂直居中显示，所以至少部分地克服了要么无法彻底解决垂直居中问题，要么虽然能够解决垂直居中问题，但是需要增加javascript代码开发成本和维护成本，要么虽然能够解决垂直居中问题，也无需增加javascript代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难的技术问题，进而达到了在解决文字在显示标签中垂直居中显示时，无需增加代码开销，也无需使用图片代替，克服了上述缺陷。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了可以应用本公开的显示方法及系统的示例性系统架构；

图2和图3示意性示出了根据本公开实施例的显示方法及系统的应用场景；

图4示意性示出了根据本公开实施例的显示方法的流程图；

图5示意性示出了根据本公开实施例的文字在显示标签中的显示效果；

图6～图7示意性示出了根据本公开实施例的在显示标签中垂直居中显示文字的示意图；

图8示意性示出了根据本公开实施例的显示系统的框图；以及

图9示意性示出了根据本公开实施例的适于实现显示方法及系统的计算机系统的框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。本领域技术人员还应理解，实质上任意表示两个或更多可选项目的转折连词和/或短语，无论是在说明书、权利要求书还是附图中，都应被理解为给出了包括这些项目之一、这些项目任一方、或两个项目的可能性。例如，短语“A或B”应当被理解为包括“A”或“B”、或“A和B”的可能性。

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

图1示意性示出了可以应用本公开的显示方法及系统的示例性系统架构。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的系统架构100可以包括终端设备101、102、103，网络104和服务器1010。网络104用以在终端设备101、102、103和服务器1010之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线和/或无线通信链路等等。

用户可以使用终端设备101、102、103通过网络104与服务器1010交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端和/或社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器1010可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的显示方法一般可以由服务器1010执行。相应地，本公开实施例所提供的显示系统一般可以设置于服务器1010中。本公开实施例所提供的显示方法也可以由不同于服务器1010且能够与终端设备101、102、103和/或服务器1010通信的服务器或服务器集群执行。相应地，本公开实施例所提供的显示系统也可以设置于不同于服务器1010且能够与终端设备101、102、103和/或服务器1010通信的服务器或服务器集群中。或者，本公开实施例所提供的显示方法也可以由终端设备101、102、或103执行，或者也可以由不同于终端设备101、102、或103的其他终端设备执行。相应地，本公开实施例所提供的显示系统也可以设置于终端设备101、102、或103中，或设置于不同于终端设备101、102、或103的其他终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

图2和图3示意性示出了根据本公开实施例的显示方法及系统的应用场景。

如图2所示，使用Ios系统的浏览器访问M网站时，“更多秒杀”这几个字在方框框出的显示标签/显示模块中呈垂直居中显示状态；如图3所示，使用Android系统的浏览器访问M网站时，“更多秒杀”这几个字在方框框出的显示标签/显示模块中无法垂直居中显示，即“更多秒杀”这几个字相对于带箭头的圆圈这个图标，显示得较偏上。

针对如图2和图3所示的应用场景，使用本公开提供的技术方案，可以兼容不同系统的浏览器(如Ios系统的浏览器和Android系统的浏览器)，进而达到了在解决文字在显示标签中垂直居中显示时，无需增加代码开销，也无需使用图片代替的技术效果。

应该理解，图2和图3所示仅为可以应用本公开实施例的应用场景的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他环境或场景。

图4示意性示出了根据本公开实施例的显示方法的流程图。

如图4所示，该方法包括操作S410～S440。

在操作S410，获取父元素数据和子元素数据，其中，父元素数据用于生成待显示对象的背景，子元素数据用于生成至少包含文字信息的主体。

应该理解，对于一个待显示对象而言，其子元素对应于主体部分，其父元素对应于背景部分，并且子元在一个待显示对象中，子元素根据不同的情形可以具有一层或者多层父元素。

结合图2和图3，其中的“更多秒杀”这几个字和“带箭头的圆圈”这个图标属于子元素，它们在显示标签中的背景(图2和图3显示为空白)属于父元素。

在操作S420，从子元素数据中提取用于生成文字信息的第一子元素数据。

由于子元素数据中的非文字信息如图标等，在显示时一般不受字号限制，其显示属性一旦被设置成“垂直居中”，都会在显示标签中显示成垂直居中状态，而不会显示偏了。

但是，子元素数据中的文字信息则不同，在显示时一般会受字号限制，例如，如字体要求显示成12px时，其显示属性即使被设置成“垂直居中”，也无法在显示标签中显示成垂直居中状态，而是会显示偏了，如图3所示。

因此，在显示待显示的对象时，可从子元素数据中提取与生成文字信息有关的数据即第一子元素数据，进而对其进行特殊处理，以实现垂直居中显示的目的。

在操作S430，复制第一子元素数据，得到第二子元素数据。

即，复制与生成文字信息有关的子元素数据，得到两分一模一样的与生成文字信息有关的子元素数据，这样，一份父元素数据就会同时具有两份完全相同的与生成文字信息有关的子元素数据。

在操作S440，在显示待显示对象时，通过第一子元素数据以隐藏形式生成文字信息以在背景中占位，并通过第二子元素数据生成在背景中垂直居中显示的文字信息。

具体地，在显示时，为第一子元素数据设置样式visibility：hidden，这样就能隐藏由第一子元素数据生成的文字信息，但是这些文字信息仍然跟隐藏之前一样在由父元素生成的背景中占有相同的位置。同时，在通过第二子元素数据生成文字信息时，通过改变需要显示的文字的字号大小，以及改变文字信息在显示标签中的显示效果，使得文字信息最终在背景中以原字号大小垂直居中显示。

与相关技术中在垂直居中显示文字信息时，尤其在针对小于12px的字体进行垂直居中显示时，要么无法彻底解决垂直居中问题，要么虽然能够解决垂直居中问题，但是需要增加javascript代码开发成本和维护成本，要么虽然能够解决垂直居中问题，也无需增加javascript代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难相比，本公开的实施例，因为采用了两份完全相同的子元素进行文字显示的技术手段，其中，一份子元素生成的文字信息用于在父元素生成的背景中占位，另一份子元素生成的文字信息能够悬浮在父元素生成的背景中，且在该背景中垂直居中显示，所以至少部分地克服了要么无法彻底解决垂直居中问题，要么虽然能够解决垂直居中问题，但是需要增加javascript代码开发成本和维护成本，要么虽然能够解决垂直居中问题，也无需增加javascript代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难的技术问题，进而达到了在解决文字在显示标签中垂直居中显示时，无需增加代码开销，也无需使用图片代替，克服了上述缺陷。

下面参考图5～图7，结合具体实施例对图4所示的方法做进一步说明。

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

由于文字垂直居中显示方案在字体小于12px的时候，才会出现针对不同的系统浏览器不兼容的问题，而在字体不小于12px的时候，则不会出现针对不同的系统浏览器不兼容的问题。

并且，使用两份子元素数据实现垂直居中与使用一份相比，前者逻辑更复杂。

因此，考虑到尽量简化实现逻辑的问题，在本公开实施例中，在执行操作操作S420之前，可以先判断当前的文字信息是否是需要显示成小于预设字号(如12px的)的字体，如果确定当前的文字信息是需要显示成小于预设字号的字体，再依次执行操作S420～操作S440，实现垂直居中显示。否则，如果确定当前的文字信息并不是需要显示成小于预设字号的字体，则只需要将属性设置成“垂直居中”，就可以自动实现垂直居中显示。

通过本公开实施例，由于正常情况下小于12px的才会出现使用某些系统浏览器时无法垂直居中显示的问题，因此，只有在这种情况下才执行前述实施例中提供的文字显示逻辑，否则直接将属性设置成“垂直居中”进行自动显示即可，不仅可以实现垂直居中现实的目的，而且可以简化显示逻辑。

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

结合图2和图3，以方框中的内容为一待显示的对象(或者待显示的显示标签)，针对该对象，除了获取其父元素数据(命名为c0)之外，还会获取其子元素数据，该子元素数据包括两部分，即关于“更多秒杀”这几个字的子元素数据，命名为c1，以及关于“带箭头的圆圈”这个图标的子元素数据，命名为c2。假设要求将由c1生成的“更多秒杀”显示成字号为10px的字体，此时，在正常显示由c0和c2生成的显示内容的同时，复制c1，得到与c1一份一模一样的子元素数据，命名为c3。接下来，以隐藏形式显示由c1生成的“更多秒杀”以实现占位目的。同时，重新设置由c2生成的“更多秒杀”的字号，如将“更多秒杀”的字号设置成10px的2倍即20px(只要保证设置之后字号不小于预设字号如12px即可)，然后以20px字号的字体，在“垂直居中”属性下，在显示标签中以悬浮形式显示“更多秒杀”，此时，“更多秒杀”会自动垂直居中显示，但是字号却是实际要求的2倍，为了使“更多秒杀”当前显示的字号与实际要求的字号保持一致，因此需要设置c2的样式transform：scale(0.5)以将由c2生成的“更多秒杀”保持垂直居中并使显示效果缩小1/2，即缩小一半显示尺寸，这时候字体的显示大小就会与要求的一致，最终显示效果如图5所示。

通过本公开实施例，由于字号不小于12px的文字信息在“垂直居中”属性下自然会垂直居中显示，因此，先按照一定比例放大字号，再相应比例的倒数缩小显示效果，就能够实现兼容不同系统的浏览器，按原字号垂直居中显示文字信息的目的。

作为一种可选的实施例，该方法还可以包括在显示待显示对象时：基于父元素数据在背景中设置参考位置；以及在缩小预定文字信息的显示效果时基于参考位置进行缩小。

具体地，基于上述示例，可以先在父元素数据中设置position：relative，然后设置c2的显示位置position：absolute，包括Left、top、transform-origin的值，具体可以根据具体情况设置。这样就能完美解决字号设置小于12px的时候垂直居中对不同系统的浏览器不兼容的问题。

此外，由于文字信息有时候在方框中要求左对齐显示，有时候又要求右对齐显示，或者中心对齐显示，为了与预定显示效果保持完全一致，如对应于预定显示效果以左对齐，右对齐，中心对齐等方式垂直居中显示，可以基于父元素数据在背景中预先设置参考位置，如图6～图7中“黑点”标注的位置，然后基于该参考位置缩小显示效果。

作为一种可选的实施例，该方法还可以包括：如果文字信息能够用文字表示，则执行从子元素数据中提取用于生成文字信息的第一子元素数据的相关操作；以及如果文字信息(如一些特殊字体或者图标等)无法用文字表示，则在显示待显示对象时，使用图片代替文字信息进行显示。

由于图片可以在垂直居中属性下，不受字号大小限制，自动显现成垂直居中状态，因此在无法用文字表示的情况下，使用图片代替文字信息，也能兼容不同系统的浏览器，实现垂直居中显示。

此外，本公开提供的上述实现方案，可以应用于网站页面研发阶段，并且在研发完成后，可以进行相关测试，以确保可以实现兼容不同系统的浏览器，在显示模块/显示标签中垂直居中显示相关文字，尤其适应于文字字号小于预设字号如12px的情形。

图8示意性示出了根据本公开实施例的显示系统的框图。

如图8所示，该显示系统800包括：获取模块810、提取模块820、复制模块830和第一显示模块840。

获取模块810，用于获取父元素数据和子元素数据，其中，父元素数据用于生成待显示对象的背景，子元素数据用于生成至少包含文字信息的主体；

提取模块820，用于从子元素数据中提取用于生成文字信息的第一子元素数据；

复制模块830，用于复制第一子元素数据，得到第二子元素数据；以及

第一显示模块840，用于在显示待显示对象时，通过第一子元素数据以隐藏形式生成文字信息以在背景中占位，并通过第二子元素数据生成在背景中垂直居中显示的文字信息。

与相关技术中在垂直居中显示文字信息时，尤其在针对小于12px的字体进行垂直居中显示时，要么无法彻底解决垂直居中问题，要么虽然能够解决垂直居中问题，但是需要增加javascript代码开发成本和维护成本，要么虽然能够解决垂直居中问题，也无需增加javascript代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难相比，本公开的实施例，因为采用了两份完全相同的子元素进行文字显示的技术手段，其中，一份子元素生成的文字信息用于在父元素生成的背景中占位，另一份子元素生成的文字信息能够悬浮在父元素生成的背景中，且在该背景中垂直居中显示，所以至少部分地克服了要么无法彻底解决垂直居中问题，要么虽然能够解决垂直居中问题，但是需要增加javascript代码开发成本和维护成本，要么虽然能够解决垂直居中问题，也无需增加javascript代码开发成本和维护成本，但是使用图片不够灵活，运营起来十分困难的技术问题，进而达到了在解决文字在显示标签中垂直居中显示时，无需增加代码开销，也无需使用图片代替，克服了上述缺陷。

作为一种可选的实施例，提取模块还用于：在文字信息需要显示成小于预设字号的字体的情况下，实现从子元素数据中提取用于生成文字信息的第一子元素数据的相关功能。

通过本公开实施例，由于正常情况下小于12px的才会出现使用某些系统浏览器时无法垂直居中显示的问题，因此，只有在这种情况下才执行前述实施例中提供的文字显示逻辑，否则直接将属性设置成“垂直居中”进行自动显示即可，不仅可以实现垂直居中现实的目的，而且可以简化显示逻辑。

作为一种可选的实施例，第一显示模块，还用于在显示待显示对象时：确定文字信息的字体实际需要显示成的字号；以及通过第二子元素数据，先以文字信息的字体实际需要显示成的字号的预定倍数，在背景中生成垂直居中显示的预定文字信息，再以文字信息的字体实际需要显示成的字号的预定倍数分之一，缩小预定文字信息的显示效果，并使缩小后的文字信息在背景中保持垂直居中显示状态。

通过本公开实施例，由于字号不小于12px的文字信息在“垂直居中”属性下自然会垂直居中显示，因此，先按照一定比例放大字号，再相应比例的倒数缩小显示效果，就能够实现兼容不同系统的浏览器，按原字号垂直居中显示文字信息的目的。

作为一种可选的实施例，第一显示模块还用于在显示待显示对象时：基于父元素数据在背景中设置参考位置；以及在缩小预定文字信息的显示效果时基于参考位置进行缩小。

由于文字信息有时候在方框中要求左对齐显示，有时候又要求右对齐显示，或者中心对齐显示，为了与预定显示效果保持完全一致，如对应于预定显示效果以左对齐，右对齐，中心对齐等方式垂直居中显示，可以基于父元素数据在背景中预先设置参考位置，如图6～图7中“黑点”标注的位置，然后基于该参考位置缩小显示效果。

作为一种可选的实施例，提取模块还用于：如果文字信息能够用文字表示，则实现从子元素数据中提取用于生成文字信息的第一子元素数据的相关功能；以及系统还包括：第二显示模块，用于如果文字信息无法用文字表示，则在显示待显示对象时，使用图片代替文字信息进行显示。

由于图片可以在垂直居中属性下，不受字号大小限制，自动显现成垂直居中状态，因此在无法用文字表示的情况下，使用图片代替文字信息，也能兼容不同系统的浏览器，实现垂直居中显示。

根据本公开的实施例的模块中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，获取模块810、提取模块820、复制模块830和第一显示模块840中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，获取模块810、提取模块820、复制模块830和第一显示模块840中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，获取模块810、提取模块820、复制模块830和第一显示模块840中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

需要说明的是，本公开的实施例中系统部分与本公开的实施例中方法部分是相对应的，系统部分的描述具体参考方法部分，在此不再赘述。

图9示意性示出了根据本公开实施例的适于实现显示方法及系统的计算机系统的框图。图9示出的计算机系统仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图9所示，根据本公开实施例的计算机系统900包括处理器901，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行各种适当的动作和处理。处理器901例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器901还可以包括用于缓存用途的板载存储器。处理器901可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 903中，存储有系统900操作所需的各种程序和数据。处理器901、ROM 902以及RAM 903通过总线904彼此相连。处理器901通过执行ROM 902和/或RAM 903中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 902和RAM 1003以外的一个或多个存储器中。处理器901也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，系统900还可以包括输入/输出(I/O)接口9010，输入/输出(I/O)接口9010也连接至总线904。系统900还可以包括连接至I/O接口9010的以下部件中的一项或多项：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至I/O接口9010。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。在该计算机程序被处理器901执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读存储介质，该计算机可读存储介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线、光缆、射频信号等等，或者上述的任意合适的组合。

例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 902和/或RAM 903和/或ROM 902和RAM 903以外的一个或多个存储器。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种显示方法，包括：

获取父元素数据和子元素数据，其中，所述父元素数据用于生成待显示对象的背景，所述子元素数据用于生成至少包含文字信息的主体；

从所述子元素数据中提取用于生成所述文字信息的第一子元素数据；

复制所述第一子元素数据，得到第二子元素数据；

在显示所述待显示对象时，通过所述第一子元素数据以隐藏形式生成所述文字信息以在所述背景中占位，并通过所述第二子元素数据生成在所述背景中垂直居中显示的所述文字信息；

其中，所述方法还包括：

如果所述文字信息需要显示成小于预设字号的字体，则执行所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关操作。

2.根据权利要求1所述的方法，其中，所述方法还包括在显示所述待显示对象时：

确定所述文字信息的字体实际需要显示成的字号；以及

通过所述第二子元素数据，先以所述文字信息的字体实际需要显示成的字号的预定倍数，在所述背景中生成垂直居中显示的预定文字信息，再以所述文字信息的字体实际需要显示成的字号的预定倍数分之一，缩小所述预定文字信息的显示效果，并使缩小后的文字信息在所述背景中保持垂直居中显示状态。

3.根据权利要求2所述的方法，其中，所述方法还包括在显示所述待显示对象时：

基于所述父元素数据在所述背景中设置参考位置；以及

在缩小所述预定文字信息的显示效果时基于所述参考位置进行缩小。

4.根据权利要求1所述的方法，其中，所述方法还包括：

如果所述文字信息能够用文字表示，则执行所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关操作；以及

如果所述文字信息无法用文字表示，则在显示所述待显示对象时，使用图片代替所述文字信息进行显示。

5.一种显示系统，包括：

获取模块，用于获取父元素数据和子元素数据，其中，所述父元素数据用于生成待显示对象的背景，所述子元素数据用于生成至少包含文字信息的主体；

提取模块，用于从所述子元素数据中提取用于生成所述文字信息的第一子元素数据；

复制模块，用于复制所述第一子元素数据，得到第二子元素数据；

第一显示模块，用于在显示所述待显示对象时，通过所述第一子元素数据以隐藏形式生成所述文字信息以在所述背景中占位，并通过所述第二子元素数据生成在所述背景中垂直居中显示的所述文字信息；

其中，所述提取模块还用于：

在所述文字信息需要显示成小于预设字号的字体的情况下，实现所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关功能。

6.根据权利要求5所述的系统，其中，所述第一显示模块，还用于在显示所述待显示对象时：

确定所述文字信息的字体实际需要显示成的字号；以及

通过所述第二子元素数据，先以所述文字信息的字体实际需要显示成的字号的预定倍数，在所述背景中生成垂直居中显示的预定文字信息，再以所述文字信息的字体实际需要显示成的字号的预定倍数分之一，缩小所述预定文字信息的显示效果，并使缩小后的文字信息在所述背景中保持垂直居中显示状态。

7.根据权利要求6所述的系统，其中，所述第一显示模块还用于在显示所述待显示对象时：

基于所述父元素数据在所述背景中设置参考位置；以及

在缩小所述预定文字信息的显示效果时基于所述参考位置进行缩小。

8.根据权利要求5所述的系统，其中：

所述提取模块还用于：如果所述文字信息能够用文字表示，则实现所述从所述子元素数据中提取用于生成所述文字信息的第一子元素数据的相关功能；以及

所述系统还包括：第二显示模块，用于如果所述文字信息无法用文字表示，则在显示所述待显示对象时，使用图片代替所述文字信息进行显示。

9.一种计算机系统，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至4中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现权利要求1至4中任一项所述的方法。