Sherman IT: break

Showing posts with label break. Show all posts

26 January 2022

How to break all lines into 78 character long all at once in vim?

(Author: Sherman Chen)

Method 1
========

:set textwidth=78

gggqG

"gg" takes you to the first line, "gq" is the format operator and "G" the motion that jumps to the last line.

Method 2
========

:set textwidth=78

:1,$g/.*/normal jgwap

Method 3
========

1. :set linebreak
to recover those broken words at the end of each line into whole words.

2. :set textwidth=78

3. Find a line which is longer than 78 characters, say line #3. Move the cursor to that line minus one, i.e. 3 - 1 = 2.

4. qaj$aa Backspace Escape q

5. See how many lines the file contains totally, say, 100.

6. gg

7. 100@a Enter

All the lines will become 78 character long now.

Method 4 (which has improved Method 3)
========

1. :set linebreak
to recover those broken words at the end of each line into whole words.

2. :set textwidth=78

3. Move the cursor to any line which is longer than 78 characters.

4. qa$aa Backspace Escape q

5. :%normal @a

All the lines will become 78 character long now.

(END)

13 January 2022

How to automatically break long lines if lines are too long in vim?

To break long lines,

:set textwidth=78

To prevent a line from being broken from within a word,

:set linebreak

29 June 2021

CSS for 5 Typical Media Query Break Points (Device Screen Sizes)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

/* Typical device breakpoints - 5 groups */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
[class*="col-"] {width: 100%; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.col-min600-1 {width: 8.33%;}
.col-min600-2 {width: 16.66%;}
.col-min600-3 {width: 25%;}
.col-min600-4 {width: 33.33%;}
.col-min600-5 {width: 41.66%;}
.col-min600-6 {width: 50%;}
.col-min600-7 {width: 58.33%;}
.col-min600-8 {width: 66.66%;}
.col-min600-9 {width: 75%;}
.col-min600-10 {width: 83.33%;}
.col-min600-11 {width: 91.66%;}
.col-min600-12 {width: 100%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.col-min768-1 {width: 8.33%;}
.col-min768-2 {width: 16.66%;}
.col-min768-3 {width: 25%;}
.col-min768-4 {width: 33.33%;}
.col-min768-5 {width: 41.66%;}
.col-min768-6 {width: 50%;}
.col-min768-7 {width: 58.33%;}
.col-min768-8 {width: 66.66%;}
.col-min768-9 {width: 75%;}
.col-min768-10 {width: 83.33%;}
.col-min768-11 {width: 91.66%;}
.col-min768-12 {width: 100%;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.col-min992-1 {width: 8.33%;}
.col-min992-2 {width: 16.66%;}
.col-min992-3 {width: 25%;}
.col-min992-4 {width: 33.33%;}
.col-min992-5 {width: 41.66%;}
.col-min992-6 {width: 50%;}
.col-min992-7 {width: 58.33%;}
.col-min992-8 {width: 66.66%;}
.col-min992-9 {width: 75%;}
.col-min992-10 {width: 83.33%;}
.col-min992-11 {width: 91.66%;}
.col-min992-12 {width: 100%;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.col-min1200-1 {width: 8.33%;}
.col-min1200-2 {width: 16.66%;}
.col-min1200-3 {width: 25%;}
.col-min1200-4 {width: 33.33%;}
.col-min1200-5 {width: 41.66%;}
.col-min1200-6 {width: 50%;}
.col-min1200-7 {width: 58.33%;}
.col-min1200-8 {width: 66.66%;}
.col-min1200-9 {width: 75%;}
.col-min1200-10 {width: 83.33%;}
.col-min1200-11 {width: 91.66%;}
.col-min1200-12 {width: 100%;}
}

</style>
</head>

<body>

</body>

</html>