Font Size Previewer II (Comparison Version)

font-size-previewer-ii-comparison-version.markdown

Font Size Previewer II (Comparison Version)

A Pen by mark on CodePen.

License.

index.html

<div class="container">
  <h1>Font Size Previewer using React (Comparison Version)</h1>
</div>
<div class="container">
  <h3>Enter Size and Valid CSS Units</h3>
</div>
<div class="container">
  <p>E.g. <strong>16px</strong> or <strong>3rem</strong> or <strong>5em</strong></p>
</div>
<div class="container">
  <div id="fontSizeControl">
  </div>
</div>

script.babel

class FontSizeContentBox extends React.Component {
  render() {
    const fontSize = this.props.fontSize;    
    var divStyle = {
      fontSize: fontSize,
      color: "blue"
    };
    
    // important!
    var inputPattern = /(\d+\.*\d*)(px|rem|em)$/;
    
    var smallerFont = '';
    var smallerFontStr = '';
    var smallerStyle = {
      fontSize: fontSize,
      color: "dimgray"
    };
    
    var largerFont = '';
    var largerFontStr = '';
    var largerStyle = {
        fontSize: fontSize,
        color: "dimgray"
    };
    
    // Test valid input b/c live display is supported.
    if ( inputPattern.test(fontSize) ) {
      let sizeComp = inputPattern.exec(fontSize);
            
      // px, rem, or rem
      let sizeUnit = sizeComp[2].toLowerCase();
      
      if ( (sizeComp[1] > 10) && ( (sizeUnit == 'rem') || (sizeUnit =='em') ) ) {
        divStyle = {
          fontSize: '16px',
          color: "firebrick"
        };
        return (
          <div id="font-size-content-box" style={divStyle}>
            Too large. Try 1-10 rem and em sizes.
          </div>
        );
      }
      
      // juxtapose input with a smaller and larger size.
      let stepVal = 0;
      switch (sizeUnit) {
        case 'px':
          stepVal = 4;
          break;
        case 'rem':
          stepVal = 1;
        case 'em':
          stepVal = 1;
          break;
      }
      
      // avoid negative sizes
      smallerFont = (sizeComp[1] - stepVal) > 0 ? (sizeComp[1] - stepVal) : sizeComp[1];
      smallerFontStr = smallerFont + sizeUnit;
      smallerStyle = {
        fontSize: smallerFontStr,
        color: "dimgray"
      };      
      
      // need to convert to float for math + operator.
      largerFont = parseFloat(sizeComp[1]) + stepVal;
      largerFontStr = largerFont + sizeUnit;
      largerStyle = {
        fontSize: largerFontStr,
        color: "dimgray"
      };
    }
    
    return (
      <div id="font-size-content-box" style={divStyle}>
        <span style={smallerStyle}>{smallerFontStr}&nbsp;&nbsp;</span>{fontSize}&nbsp;&nbsp;<span style={largerStyle}>{largerFontStr}</span>
      </div>
    );
  }
}

class FontSizeInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleFontSizeChange = this.handleFontSizeChange.bind(this);
  }

  handleFontSizeChange(e) { 
      this.props.onFontSizeChange(e.target.value);

  }

  render() {
    return (
      <form>
        font-size: <input
          name="font-input"
          id="font-input"
          pattern="\d+\.*\d*(px|rem|em)"
          type="text"
          size="6"
          placeholder="16px"
          value={this.props.fontSize}
          onChange={this.handleFontSizeChange}
        />
      </form>
    );
  }
}

class FontSizeContentPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fontSize: this.props.fontSize
    };

    this.handleFontSizeChange = this.handleFontSizeChange.bind(this);
  }

  handleFontSizeChange(fontSize) {
    this.setState({
      fontSize: fontSize
    });
  }

  render() {
    return (
      <div id="font-size-content-panel">
        <FontSizeInput
          fontSize={this.state.fontSize}
          onFontSizeChange={this.handleFontSizeChange}
        />
        <FontSizeContentBox fontSize={this.state.fontSize} />
      </div>
    );
  }
}

// JSX Syntax (Babel)
ReactDOM.render(
  <FontSizeContentPanel fontSize="16px" />, document.getElementById("fontSizeControl")
);

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

/* Default Formatting */

body {
  text-align: center;
  padding: 1%;
  font: 1rem Helvetica Neue Light, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  background-color: black;
}

* {
  box-sizing: border-box;
}

p {
  text-align: left;
  margin: 0 0 1em 0;
  color: white;
}

h1,
h2,
h3 {
  font-weight: 100;
  color: white;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback if no flexbox support. */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.column-1 {
  float: none;
  width: 100%
}

.column-2 {
  float: left;
  width: 50%;
}

.column-3 {
  float: left;
  width: 33.333%;
}

/* End Default Formatting */

form {
  padding: 1rem;
  text-align: left;
}

#font-size-content-panel {
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5%;
  text-align: left;
  border: 2px solid black;
  border-radius: 5px;
  background-color: lightgray;
  min-width: 350px;
  max-width: 1280px;
}

#font-size-content-box {
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  width: 99%;
}

input {
  border-radius: 5px;
  padding: .2rem;
}

.caption-text {
  font-size: .9rem;
}