Vincent Tang
Fullstack Developer and cohost of CodeChefs
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
