Is There a Cross-Browser Way to Condense Text on a Page

Is there a cross-browser way to condense text on a page?

Short answer: I don't think there is a working cross-browser example that meets your requirements.

The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.

Some possible ways that could emulate this behaviour that I can think of:

• Use a flash-based approach like sIFR
• Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
• Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
• Use a server-side script that generates an image from text parameters

In short, there is no simple and elegant solution to this problem because text and image manipulation is generally something you'd do in a graphics editor.

If this is not possible, I'd definately recommend looking into Typeface and sIFR.

Make a font more condensed with CSS

You are looking for letter-spacing

#id { letter-spacing: -1px; }

Reference

Cross-browser font issue

It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.

Microsoft says,

Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations

However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.

Cross-browser compatibility width issue

Try Changing these class's (have checked them on this link provided by you)

.textwidget {
  font-size: 18px;
  position: relative;
  width: 160px;
  margin: auto;
}
.p_call {
  font-size: 20px !important;
  top: -13px;
  left: 40%;
  margin: 0px;
  background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
  vertical-align: middle;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  float: left;
  padding: 0px;
  width: 100%;
  background-size: 100%;
}
.p_phone {
  font-size: 20px;
  margin: 0px !important;
  height: 30px;
  opacity: 1;
  top: 27px;
  text-align: center;
  color: #FFF;
  position: absolute;
  width: 100%;
  left: 40%;
}
.p_phone a {
  color: #FFF;
  background-color: #1968A1;
  font-weight: 800;
  padding: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: inline-block;
  width: 100%;
}

The divs belonging to p_call class and p_phone were not wrapped properly by textwidget class. Hence we have to give two different width's, now since textwidget is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.

Reduce length of a post on preview page.

You can do it with either PHP (which I'd use) or JavaScript.

PHP

$string = 'A very long string ... that is longer than this.';
$string = substr($string, 0, 250); // 250 characters long

JavaScript

For the JavaScript implementation, you would need to have some sort of identifiable container that your text lives in; you could use <div id="the_post_content"></div>, for instance.

var container = document.getElementById('the_post_content');
var str = container.innerHTML;
container.innerHTML = str.substring(0, 10); // Container now has text that's truncated

Fiddle of the JS approach here.

How do I set up an if/or condition, such that my design changes based on the user's browser's font size?

Don't use fixed css units like px and pt. Use em or ex.

em  1em is equal to the current font size. 2em means 2 times the size of the current font.
      E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em'
      is a very useful unit in CSS, since it can adapt automatically to the font that the
      reader uses

ex  one ex is the x-height of a font (x-height is usually about half the font-size)

---

Related Topics