- Is there a way to make a variable width font act like a fixed width font in HTML? [duplicate]
- Is there a way to make a variable width font act like a fixed width font in HTML? [duplicate]
- Can I turn a variable width font into a fixed-width font?
- Change variable width font to fixed width font
- Creating columns of text with a variable width font
- CSS Scale fixed-width font to fit constant number of characters on a line
- CSS Style
- HTML Body
- Related
Is there a way to make a variable width font act like a fixed width font in HTML? [duplicate]
Both work fine with fixed width fonts but break with variable width fonts. Solution: Finally, i found out that it is not possible to make the fonts display in same width unless it is a mono-space font.
Is there a way to make a variable width font act like a fixed width font in HTML? [duplicate]
Is there a way to make a variable width font act like a fixed width font in HTML?
For example, if I have the sentence, «The quick grey fox jumped over the lazy dog» displayed in «Courier New», a fixed width font, it would be wider overall than if it was in a variable width font like, «Arial». I would like to use «Arial» instead of «Courier New» but have the characters fixed width.
Example of variable width:
The quick grey fox jumped over the lazy dog.
The quick grey fox jumped over the lazy dog
Notice how close the characters are to each other in the word «quick» and «grey» in each example.
Not with just CSS. I would recommend you use the popular Lettering.js (you’ll need jQuery for it) to generate span tags around each character, then set an width across all the characters.
The only thing I can think of is to put each letter in an HTML element, and style that element something along the lines of:
width: 8px; /* Whatever fixed width you want here */ display: block; /* Force the width to be respected. See also: inline-block */ float: left; /* So it won't be 1-per-line. Not needed for inline-block */ text-align: center; /* So the character appears in the middle of the block */ I’m not familiar with Flex, but if I were to implement this approach, I would put together some Javascript that would generate all the elements for me.
It’s an old question, but I would suggest looking for a suitable fixed-width font that can be used as a webfont that has the features you want. I’m a pretty big fan of Inconsolata, for example.
I’d start with Google Fonts and unselect all categories leaving only Monospace.
You might be able to use the letter-spacing CSS property to get what you want. By definition, monospace fonts have the same character width unlike serif or sans-serif. Using letter-spacing is your best bet W3C Reference
Css — Font scaling based on width of container, Inside your CSS, try adding this at the bottom changing the 320 pixels width for wherever your design starts breaking: @media only screen and (max-width: …
Can I turn a variable width font into a fixed-width font?
I found a free ancient-typewriter font I’d like to use in a project, but the person who made it apparently traced some scanned outlines and poured them into a variable width truetype font. That is not very typewritery, and I’d rather repair that. Can I do that from inside XeLaTeX/fontspec/microtype or will I have to learn how to use a full-blown font editor like fontforge?
The project is a book where various chapters have different «moods» and narrative perspectives and I’m trying to reflect them in the font used. The old-typewriter font is for an exchange of letters between two agencies in the 1950s. So, I guess I’d need hyphenation, for example.
You can use the luaotfload.patch_font callback when using LuaTeX. Here I just go over the complete font to find the widest glyph (probably emdash or so) and the go over the font a second time and set every character’s width to the maximum.
It might be better to just go over the alphabetic range instead of the whole font when finding the maximum, but then I don’t have your font and I don’t know your intentions.
\documentclass \usepackage \directlua local function monospace(tfmdata) local max = 0 for _,char in pairs(tfmdata.characters) do max = max < char.width and char.width or max end print(max) for _,char in pairs(tfmdata.characters) do char.width = max end end luatexbase.add_to_callback("luaotfload.patch_font", monospace, "monospace") > \setmainfont \begin Hello \end
Kerning problem when using a variable width font in, 3. It looks like you're using a variable width font in your terminal in the first picture. This is why characters are smashed. Terminal prompts should …
Change variable width font to fixed width font
I have a asp.net dropdown list control which consists of list of item name and price as follows
Pen | 2.09 Book | 1.2 Handbag | 30.50 Pencil | 1.05 The padding is done so that the dropdown looks perfectly aligned but this works only for font-family: "Courier New" , Courier, monospace;
Now the whole page is using Arial font and the same is required for the dropdown, how can i go about achieving this? So far i have tried wrapping each character in span tag using jquery as follows:
var array = $dropdownItem.text().split(''); var result = '' + array.join('') + ''; $dropdownItem.html(result); with hopes that maybe i can apply like a fixed font width to each character, but I dont know how to go about that. Apperciate any help.
Finally, i found out that it is not possible to make the fonts display in same width unless it is a mono-space font. By definition, mono-space font means each character has equal width.
Change variable width font to fixed width font, Change variable width font to fixed width font. Ask Question Asked 8 years, 3 months ago. Modified 8 years ago. Viewed 625 times
Creating columns of text with a variable width font
I'm trying to create coloumns of text for a C# app that will be running on MSN Messenger. I'm having trouple getting everything to line up.
Here's an example of the output that I want:
1) Pizza Hut 123 Fake St. 2) Domino's Pizza 123 Fake St. 3) The Cheesecake Cafe 123 Fake St. 4) Capital Pizza & Steakhouse 123 Fake St. 5) Funky Pickle Pizza 123 Fake St. 6) Boston Pizza 123 Fake St. 7) Rose Bowl Rouge Lounge 123 Fake St. 8) Royal Pizza 123 Fake St. 9) A Columbus Pizza & Donair Inc 123 Fake St. But because it is a variable width font it is displaying like this:
1) Pizza Hut 123 Fake St. 2) Domino's Pizza 123 Fake St. 3) The Cheesecake Cafe 123 Fake St. 4) Capital Pizza & Steakhouse 123 Fake St. 5) Funky Pickle Pizza 123 Fake St. 6) Boston Pizza 123 Fake St. 7) Rose Bowl Rouge Lounge 123 Fake St. 8) Royal Pizza 123 Fake St. 9) A Columbus Pizza & Donair Inc 123 Fake St. I have tried using the C# string.PadRight() function as well as creating my own function that add padding using spaces and tabs. Both work fine with fixed width fonts but break with variable width fonts.
Is there any way to determine the width of a string in a given font?
Or does anyone have any other suggestions?
Just use the textrenderer class. The simplest case :
Size size = TextRenderer.MeasureText("Hello world", someFont); If you don't have access to System.Windows.Fonts Graphics.measurestring remains, it have some limitations but should do the work :
Bitmap bmp = new Bitmap(1,1); Graphics graphics = Graphics.FromImage(bmp); SizeF size = graphics.MeasureString("Hello world", someFont); But be aware that if the font of your text and the spaces MUST be the same there will be cases where you can't align the text perfectly. I don't know what MSN Messenger is able to do in your case but except if you have access to at least a subset of HTML you won't have a perfect output.
You should also be aware that if you do measurements on a local computer and send to another without the correct font installed your columns won't look like columns anymore so your are limited to the basic subset of fonts presents on all computers.
If multiple operating system support is also a requirement you will have some big problems as the Arial font on Mac and PCs doesn't look (and measure) exactly the same.
You could try using the Graphics class to measure the length of the string given a specific font, then use that to determine how many tabs to use.
It looks like you are trying to render this all in ASCII in a single text field. Yes? If that's the case, that's pretty tricky. It looks like you have a fixed number of tabs after each one right now, and that would be the issue. You could instead do spaces -- which I suspect you are doing with padright (not very familiar with that specific function).
The key thing, though, is that with pure ASCII like that, shown in a variable width font, you will never get it to line up perfectly in a second column. You can get it close if you are diligent, but that's it -- if you have one row with a lot of capital W's, and another with a lot of lowercase i's, you'll have big width differences no matter what you do. If you're rendering in GDI, the best approach is to make one call to DrawText per column. You can make one big string out of each column if you want, and call MeasureString on the first column to determine how much space you need to move over for the second column.
Or if this is an interface where you can do html, tables or divs would work great. Depends on the specifics of your environment. You could also do something like having two auto-height-set labels in a FlowLayout panel if this was WinForms, etc. There are a lot of options for making this work, but just not pure ascii with a variable width font.
EDIT: Also, I saw you asked about how to get a Graphics class instance in a web service. You can do something like this:
private static Bitmap bitmap = new Bitmap( 1, 1 ); private static Graphics graphics = null; public static Graphics GetGeneralGraphics()
You probably want to make those local variables (that you properly dispose when finished with) in a web services context.
You should probably format everything in HTML, then you could just output TABLE and TR/TD elements for the columns
Variable fonts guide - CSS: Cascading Style Sheets, Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather …
CSS Scale fixed-width font to fit constant number of characters on a line
The following tutorial shows you how to use CSS to do "CSS Scale fixed-width font to fit constant number of characters on a line".
CSS Style
The CSS style to do "CSS Scale fixed-width font to fit constant number of characters on a line" is
div < font-family:monospace; border-right:1px solid black; float:left; clear:both; > HTML Body
body> div style="font-size: 10.0px"> 10.0 12345678901234567890!-- w w w . d e m o 2 s . co m--> div style="font-size: 10.1px"> 10.1 12345678901234567890 div style="font-size: 10.2px"> 10.2 12345678901234567890 div style="font-size: 10.3px"> 10.3 12345678901234567890 div style="font-size: 10.4px"> 10.4 12345678901234567890 div style="font-size: 10.5px"> 10.5 12345678901234567890 div style="font-size: 10.6px"> 10.6 12345678901234567890 div style="font-size: 10.7px"> 10.7 12345678901234567890 div style="font-size: 10.8px"> 10.8 12345678901234567890 div style="font-size: 10.9px"> 10.9 12345678901234567890 div style="font-size: 11.0px"> 11.0 12345678901234567890 The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> div !-- w w w . d e m o 2 s . c o m--> font-family: monospace; border-right: 1px solid black; float: left; clear: both; > body> div style="font-size: 10.0px">10.0 12345678901234567890 div style="font-size: 10.1px">10.1 12345678901234567890 div style="font-size: 10.2px">10.2 12345678901234567890 div style="font-size: 10.3px">10.3 12345678901234567890 div style="font-size: 10.4px">10.4 12345678901234567890 div style="font-size: 10.5px">10.5 12345678901234567890 div style="font-size: 10.6px">10.6 12345678901234567890 div style="font-size: 10.7px">10.7 12345678901234567890 div style="font-size: 10.8px">10.8 12345678901234567890 div style="font-size: 10.9px">10.9 12345678901234567890 div style="font-size: 11.0px">11.0 12345678901234567890 Related
- CSS Rotated text using Courier font not displayed in Opera
- CSS Running a font preview
- CSS Sass mixins for font information
- CSS Scale fixed-width font to fit constant number of characters on a line
- CSS Scale fixed-width font to fit constant number of characters on a line (Demo 2)
- CSS Scaling fonts with css
- CSS SCSS - Check variable for font-family
demo2s.com | Email: | Demo Source and Support. All rights reserved.