letter-spacing

CSS: adjusting spacing between letter according to container width?

可紊 提交于 2019-12-05 03:45:04
问题 I have vertically rotated span element with some text in it: span{ -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); height: 100%; } .container{ width: 40px; height: 500px; /* <- this can change */ } How can I make it so the spacing between the letters of the text from the span changes depending on the container's height? Basically I want the text to span over the entire height of

IE9 letter-spacing problem

ぐ巨炮叔叔 提交于 2019-12-04 09:01:18
问题 I have a page that renders ok, in FF (3x, 4x), Chrome, IE (6, 7, 8). When tested on IE9 the texts are wider. Investigating the problem it appears that the text is actually rendered whith letters more spaciated than in other borwsers. When changed the letter spacing to -0.6px the texts was rendered ok, similar to other browsers. Also when changed the render mode to "Compatibility view", the page looks just fine. Do you know what caused the change in the render mode? I "solved" the issue using

CSS Kerning for Large Numbers

半城伤御伤魂 提交于 2019-12-01 16:09:28
I realise that in the states large numbers are formatted with a , between thousands so you would write $1,000,000.00 . In South Africa a , is non-standard and could be used as a decimal point instead of the . . We would write $1000000.00 which is horrible to read. The typical solution is to use a bit of whitespace: $1 000 000.00 . The problem with that solution is that it still looks terrible. If I assume values are currency formatted in a particular DOM element (i.e. the numbers are suffixed with .00 even if it's double zero), the ideal solution would be to use CSS to somehow manipulate the

CSS Kerning for Large Numbers

我只是一个虾纸丫 提交于 2019-12-01 15:08:23
问题 I realise that in the states large numbers are formatted with a , between thousands so you would write $1,000,000.00 . In South Africa a , is non-standard and could be used as a decimal point instead of the . . We would write $1000000.00 which is horrible to read. The typical solution is to use a bit of whitespace: $1 000 000.00 . The problem with that solution is that it still looks terrible. If I assume values are currency formatted in a particular DOM element (i.e. the numbers are suffixed

Is it possible to have letter-spacing relative to the font-size and inherit properly?

主宰稳场 提交于 2019-11-30 15:15:25
问题 My question is basically the same as this one, but replace "line-height" with "letter-spacing": When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative? My use case is like this: body { font-size: 18px; letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */ } .small { font-size: 14px; /* letter-spacing is 1.2em of 18px instead of 14px */ } I

Is it possible to have letter-spacing relative to the font-size and inherit properly?

依然范特西╮ 提交于 2019-11-30 13:56:26
My question is basically the same as this one, but replace "line-height" with "letter-spacing": When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative? My use case is like this: body { font-size: 18px; letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */ } .small { font-size: 14px; /* letter-spacing is 1.2em of 18px instead of 14px */ } I know that the reason it doesn't work is that the computed value, and not the specified value, is

Convert letter-tracking value set in Photoshop to equivalent letter-spacing in CSS

限于喜欢 提交于 2019-11-30 02:16:45
I am currently building a site from a PSD. Most of the fonts have a letter-tracking of -25 ( <- AV-> : I'm guessing that is the symbol for letter spacing?). How would I get the same effect in CSS? I know the property is letter-spacing: X but it doesn't take percentages and -25px or pts would be a huge figure! You can use the em dimension instead of px , thus sizing the spacing relative to the font size (so photoshop's 25% is somewhere around .25em ). In Photoshop letter-spacing is called letter-tracking and is specifically the space between each letter of text. The problem is that Photoshop

How to modify letter-spacing in a JTextPane?

跟風遠走 提交于 2019-11-29 15:06:00
I'm need to modify letter-spacing (font tracking) in a JTextPane, and I can't get it to work. When I'm using a JTextArea, I can just do: Font font = new Font("Courier New", Font.PLAIN, 10); HashMap <TextAttribute, Object> attrs = new HashMap<TextAttribute, Object>(); attrs.put(TextAttribute.TRACKING, -0.1); font = font.deriveFont(attrs); textArea.setFont(font); but as I need to change line spacing, I need to use a JTextPane, and doing: textPane.setFont(font) as I did with the JTextArea doesn't work. another thing I tried was: MutableAttributeSet set = new SimpleAttributeSet(); StyleConstants

Convert letter-tracking value set in Photoshop to equivalent letter-spacing in CSS

你。 提交于 2019-11-28 20:37:05
问题 I am currently building a site from a PSD. Most of the fonts have a letter-tracking of -25 ( <- AV-> : I'm guessing that is the symbol for letter spacing?). How would I get the same effect in CSS? I know the property is letter-spacing: X but it doesn't take percentages and -25px or pts would be a huge figure! 回答1: You can use the em dimension instead of px , thus sizing the spacing relative to the font size (so photoshop's 25% is somewhere around .25em ). 回答2: In Photoshop letter-spacing is

Is there a way to make css letter-spacing: 0.5 px?

时光毁灭记忆、已成空白 提交于 2019-11-28 00:38:10
I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I'll use half a pixel so 0.5px, but it doesn't work, I tried using em attributes, but didn't achieve the task. So is there a way to make letter spacing half pixel (cross browser solution if possible) This bug has been reported back in 2008 and is confirmed. So if someone feels like hacking into webkit that would make a lot of designers happy. https://bugs.webkit.org/show_bug.cgi?id=20606 Sub-pixel letter spacing works fine on FF, but not on WebKit (at