小文字をボックスモデルに合わせる

私は現在、thisにpython単語クラウドライブラリを追加しようとしています（既存の画像に）。小文字をボックスモデルに合わせる

今大きな問題は、基礎となるpython画像libraryがテキストを別々に扱っていることです。それは単語の最大の文字の上端に単語の周りに "ボックス"を描画します。だから、ボックスは常にテキストに可能な限り緊密です。

ブラウザでHTML + CSSの解釈が異なります。可能な限りすべての文字が収まるように、ボックスをできるだけ太くするわけではありません。したがって、単語が小文字のみで構成されている場合、ブラウザはそこにある場合大文字にすることができます。

私の質問は、CSSのこのような「タイトな」ボックスで同様の動作を実現する方法です。

は、ここでの画像あなたが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>

出典

2017-06-26 Ragadabing

は、私はこの問題は、ボックスがそれで実際の文字を認識していないとして、純粋なHTML/CSSで解決することができるとは思わない - それだけの埋蔵量高さはフォントのプロパティに基づいています。

opentype.jsのようなものを使用して、ボックス内の文字の高さを確認し、それに応じて高さを設定することもできます。より簡単な解決策は、テキストをキャンバスに描画し、あなたのテキストが画像になっています（リンクや選択が難しい）。

出典

2017-06-27 07:30:31 RoelN

私はそれを疑っていました。私は偽の描画で解決しようとしますHTML/CSSのページを開いてから、他の単語のスペースが残っている場所を探しています。 – Ragadabing

小文字をボックスモデルに合わせる

答えて

関連する問題