Responsive

Multitext

Design

The Problem

The Problem Summary

* part of text browser defaults

Solution

Result:

  • Carets and underline are always positioned underneath text

Solution Process

1: Render appropiate text

2: Check viewport changes

Viewport Listener

CSS Media Queries

position: relative

line breaks \n

String algorithm

Static Data

Static

Dynamic

Planes of Salads & Greatness

['Planes','Of','Salads','&','Greatness']

[6,2,6,1,9]

2 lines

3 lines, maxCharsPerLine = 9

[8,6,10]

[14,10]

[6,2,6,1,9]

[6,2], [6,1,9]

[6,2], [6,1] ,[9]

Lowest Difference

String Algorithm

Advantages:
- One source of Truth

- Easier Maintenance

- Less changes to codebase

- Isolated changes

Disadvantages

- Increased Load Times

 

 Planes of Salads & Greatness -> Apply the \n where needed

DOM loading

<div class="wrapper">
  <span>Planes of Salad \n& Greatness</span>
</div>
<div class="wrapper">
  <span>Planes of Salad & Greatness</span>
  <span class="display-none">Planes of Salads\n& Greatness</span>
  <span class="display-none">Planes of\nSalads &\nGreatness</span>
</div>

1. Change span text via Javascript

OR

2: Change span text via CSS media queries

.language-en {
  .nav-text--1 {
    display:none;
    @include custom-minmax(1025px, 1200px){
      display: inline;
    }
  }
  .nav-text--2 {
    display:none;
  }
  .nav-text--3 {
    display:none;
    @include custom-min(1201px){
      display: inline;
    }
  }
}


.language-es {
  .nav-text--1 {
    display:none;
    @include custom-minmax(1025px, 1200px){
      display: inline;
    }
  }
  .nav-text--2 {
    display:none;
    @include custom-minmax(1201px, 1300px){
      display: inline;
    }
  }
  .nav-text--3 {
    display:none;
    @include custom-min(1301px){
      display: inline;
    }
  }
}

Result:

  • Carets and underline are always positioned underneath text

Questions?

Responsive Multitext Design

By Vincent Tang

Responsive Multitext Design

Everything you wanted to know about text and CSS

  • 1,158