Questions tagged [letter-spacing]

a CSS property that defines the spacing between text characters

Description

The letter-spacing CSS property specifies spacing behavior between text characters. As a length, it is an animatable property.

Usage Example

#spacing_normal {
    letter-spacing: normal; /* normal spacing between 2 letters */
}
#spacing_px {
    letter-spacing: 5px; /* space of 5 pixels between 2 letters */
}
#spacing_em {
    letter-spacing: 0.5em; /* space of 0.5em between 2 letters */
}
#spacing_inherit {
    letter-spacing: inherit; /* inherit the letter spacing provided for parent */
}

References

  1. W3C Specification
  2. MDN Link
  3. Fiddle Example
143 questions
1
vote
2 answers

Finding width of the GlyphRun in sharp dx

I could not manage to calculate the width of the glyphRun using the sharp DX. Below is the code I use to render the glyphRun and the string needs to be rendered as char as below. private void RenderGlyphRun(FontFace fontFace) { GlyphRun…
suresh
  • 177
  • 2
  • 14
1
vote
0 answers

Letter-spacing bug: Webkit browsers ignore letter-spacing less than 1px

Webkit browsers like Chrome and Safari ignore letter-spacing less than 1px (or 0.1em) while Firefox displays 0.1px steps just fine: http://jsfiddle.net/d5y6n/2/ Is there a possibility to make Webkit browsers recognize letter-spacing less than…
user1706680
  • 1,103
  • 3
  • 15
  • 34
1
vote
2 answers

Achieve letter-spacing in RaphaelJs

Is there a way to set letter-spacing in raphael js text? It can be done easily in CSS, how can I do it in raphael? Any hacks would also do..
rohan_vg
  • 1,087
  • 3
  • 15
  • 27
1
vote
2 answers

Letter spacing issue with 'overlapping' character

I'm having some trouble with a font I found on Google Web Fonts. As you can see in the image posted below, the capital V in 'Versus' overlaps with the 'e' when i'm using Firefox. Though when i'm using Chrome (or IE) it does not overlap and leaves…
Wessel T.
  • 2,280
  • 2
  • 20
  • 29
0
votes
1 answer

Letter spacing in CSS changes word spacing?

I've observed that when I adjust the letter spacing in CSS, the word spacing seems to change automatically. However, after extensive research, I couldn't find concrete information on this relationship. Background: I consulted various resources,…
Jack Trowbridge
  • 3,175
  • 9
  • 32
  • 56
0
votes
1 answer

Why does em unit in CSS not work as expected in this case?

I am learning about letter spacing. I am using the em unit here for letter spacing. The element on which I use the unit does not have any parent except html. But if I change the font size of the HTML, the letter spacing does not change. At first,…
0
votes
0 answers

Is it possible to display the caret outside of token, when it is positioned right after its last character?

I have a TokenNode, which is pretty much just a regular TextNode, but with some additional styles: createDOM(config: EditorConfig): HTMLElement { const dom = super.createDOM(config); dom.style.background = "lightgrey"; …
Michal Kurz
  • 1,592
  • 13
  • 41
0
votes
0 answers

Why Firefox doesn't resize correctly the "select" tag with custom "letter-spacing"?

I added some 'letter-spacing' to my 'select' and I noticed that Firefox doesn't change the width of the rendered 'select', meanwhile chromium does. The result is that the user can't see the entire content of select. …
cescobaz
  • 366
  • 3
  • 8
0
votes
0 answers

Use SFPro font in Flutter rather than default SF UI

Flutter's Cupertino Text Theme uses the older versions of Apple's San Francisco Font known as .SF Pro Display and .SF Pro Text. It then adds custom tracking (letter spacing) to a few default…
Walrus
  • 19,801
  • 35
  • 121
  • 199
0
votes
0 answers

Is there a way to adjust letter spacing for text in Tkinter?

I wanted to adjust the letter spacing in Tkinter like how it is possible in a document editor but couldn't find anything to change the font style to a more condensed form. I used Poppins font for some heading, but now I feel like the space between…
Arnab Das
  • 1
  • 2
0
votes
0 answers

React Project is different on localhost and on website (letterSpacing)

While I was working on localhost the site seems okay for me but when I deployed the project into a website letterSpacing seems a bit increasing. I did not changed anything while deploying. There are two images, first one shows the localhost and the…
Bugra Kucuk
  • 47
  • 1
  • 12
0
votes
2 answers

My links in tag are not working (when I pass the cursor over the text nothing happens)

I'm beginning to learn HTML/CSS and I have to make a header, and I'm having some troubles in the spacing I need to get between the texts on it. After trying a lot of things, I got the spacing right, but now somewhy the texts aint getting the…
Lucca
  • 57
  • 7
0
votes
2 answers

Add spacing between numbers after some specific digits in React Native

I need to show dashes as hints and need to have equal spacing after some digits in Text Input similar to the picture attached . Do I need to use separate text inputs for these or is it possible to achieve this in a single input text field? The user…
Nizami
  • 227
  • 1
  • 5
  • 15
0
votes
1 answer

Should letter spacing be left as normal for ADA compliance?

I am having trouble finding an answer to this. I am trying hard to make sure our site is inclusive so I initially implemented a site-wide letter spacing value of .12rem. However, some managers don't like how it looks and have asked me to reduce or…
bprdev
  • 693
  • 9
  • 12
0
votes
0 answers

Replace With Alphabet Position

Write a function that is given a string, replace every letter with its position in the alphabet. If anything in the text isn't a letter, ignore it and don't return it. a being 1, b being 2, etc.As an example: AlphabetPosition("The sunset sets at…
Mo008
  • 21
  • 4