使小写文本适合框模型

时间：2017-06-26 20:15:38

标签： html css css3 fonts webfonts

我目前正在尝试向this python词云库添加一个html导出（到现有图像一个）。

现在最大的问题是，底层python图像library正在以不同方式处理文本。它在单词最大字符的上边缘围绕一个单词绘制“框”。所以盒子总是尽可能地紧紧对着文本。

浏览器以不同方式解释HTML + CSS。它们不会使盒子尽可能紧，但是所有可能的角色都可以适应。所以如果单词只包含小写字符，浏览器仍然会在那里放置一些空格到顶部可能是大写字符。

所以现在我的问题是如何在CSS中使用这样一个“紧”的框来实现类似的行为。

为了更好地说明我的意思，这里是一张图片enter image description here

在后台，您可以看到python库中生成的png文件，以及HTML + CSS版本。小白框标记了png中框的开头。我在HTML字词周围添加了50％的不透明度背景来显示他们的盒子模型。

此示例的HTML代码为：

<html>
   <head>
      <link href="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/html5resetcss/html5reset-1.6.1.css" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
   </head>
   <body>
      <ul style="width:400px; height: 200px; background-image: url(test.png); position: absolute; top:0;left:0;">
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(119, 209, 83); top: 64px; left: 15px; font-size: 102px">hallo</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;transform: rotate(270deg); transform-origin: 50% 90% 0;position: absolute; color: rgb(47, 180, 124); top: 51px; left: 321px; font-size: 73px">ich</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(108, 205, 90); top: 3px; left: 99px; font-size: 61px">test</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(189, 223, 38); top: 142px; left: 114px; font-size: 59px">sie</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(168, 219, 52); top: 37px; left: 50px; font-size: 44px">du</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(31, 161, 135); top: 8px; left: 281px; font-size: 44px">er</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(41, 122, 142); top: 143px; left: 256px; font-size: 44px">es</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(69, 55, 129); top: 149px; left: 17px; font-size: 44px">wir</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(38, 173, 129); top: 34px; left: 241px; font-size: 44px">ihr</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(108, 205, 90); top: 14px; left: 318px; font-size: 41px">und</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(170, 220, 50); top: 1px; left: 2px; font-size: 37px">soll</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(31, 154, 138); top: 167px; left: 227px; font-size: 33px">dann</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;transform: rotate(270deg); transform-origin: 50% 90% 0;position: absolute; color: rgb(67, 62, 133); top: 54px; left: 176px; font-size: 33px">nun</li>
         <li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;transform: rotate(270deg); transform-origin: 50% 90% 0;position: absolute; color: rgb(234, 229, 26); top: 71px; left: 128px; font-size: 33px">tun</li>
      </ul>
   </body>
</html>

1 个答案:

答案 0 :(得分：0)

我不认为问题可以在纯HTML / CSS中解决，因为该框不知道其中的实际字符 - 它只是根据字体中的属性保留高度。

您可以选择分开字体（使用类似opentype.js的内容，查看框中字符的高度并相应地设置其高度。更简单的解决方案是在画布上绘制文字并裁剪它周围的空白区域，有效地完成了Python版本所做的工作。缺点是你的文本现在是一个图像（更难链接或选择）。

相关问题
最新问题