Vertical Text

PHOTO

Fri Feb 25 2022 06:13:17 GMT+0000 (Coordinated Universal Time)

// Easy Vertical Text //

@media only screen and (min-width: 640px) { em {
  width: auto !important;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-style: normal !important;
  transform: rotate(180deg);
}
}

em {
  font-style: normal !important;
}

COPY

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box. // Easy Vertical Text // @media only screen and (min-width: 640px) { em { width: auto !important; writing-mode: vertical-rl; text-orientation: sideways-right; font-style: normal !important; transform: rotate(180deg); } } em { font-style: normal !important; } Next, add the text you’d like to turn vertical on any page. Italicize the text and it will instantly turn into vertical text. It’s recommended you only do this with larger headers and shorter lines of text. You may need to position a spacer block around the vertical text to adjust its positioning. It might look odd while editing, so save the page and refresh. Customize It’s best to keep italicized text in their own text blocks. DO NOT share other font sizes in the same block unless they are all italicized. Vertical text looks best on larger devices, so the code keeps all vertical text horizontal on mobile devices. You do not need to change any values.

https://www.ghostplugins.com/steps/super-easy-vertical-text-version-2?fbclid=IwAR0yYDYS06kLYLdWZuLzI_QVREVnLMx4lkrqa4YEZtP7uS1aKN5ur7S7Rzg

Save snippets that work from anywhere online with our extensions

Comments

SquareSpace Styling

@jackie

Remove Underline from Links in Header Button to Underline on Hover Custom Bullets Custom Bullets Announcement Bar padding Tooltip Tooltip - Styling Scrolling Announcement Bar Copyright date automatic Image Block - Button Size Add colour block behind text Custom Highlight Behind Text Use Two Different Fonts On One Line Vertical Text Creates a 'Sticky' Scroll effect with sections Low Highlight on Text Colour Animated Announcement Bar Split Screen Sections (not mobile)

#css #webdev #text

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#servicenow #content #type #plain #text

Accepting Scripted REST Connections for Weird Content-Types

/* This will come in the body at XML but the header will be text/plain, which is why  
all this is happening manually to get this read from the stream.  
*/  
var reqHeaders = request.headers;
gs.info("CPSNS: reqHeaders content-type" + reqHeaders['content-type']);
if (reqHeaders['content-type'] == "text/plain; charset=UTF-8") {
    var stream = request.body.dataStream;
    var reader = new GlideTextReader(stream);
    var input = "";
    var ln = "";
    while ((ln = reader.readLine()) != null) {
        input += ln;
    }
    gs.info("CPSNS: SUB" + input);
} else {
    var body = {};
    var data = request.body.data;

    gs.info("CPSNS: req.body data" + data);

}

#css #font #fonts

02_Fonts_Class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fonts in CSS</title>

  <style>
    body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 1.6em;
    }
    #welcome p span{
      font-weight: bold;
    }
    #about p span{
      font-style: italic;
    }
    
  </style>
</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span> Eius praesentium laboriosam ratione molestiae nobis, nisi quod laudantium aliquid accusamus</span> expedita!</p>
  </div>
  <div id="about">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span> Cumque enim natus ad? Mollitia alias repudiandae </span>iusto molestias voluptatum, dolores eius.</p>
  </div>
  
</body>
</html>

#css #styling #fonts

Fav Google Font Combos

//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet">

#text #fonts

Use Two Different Fonts On One Line

/* Text change detail */
h1 strong {
  font-family: aktiv-grotesk-extended !important;
  font-size: 3.1rem;
}

#html #fonts

Google Fonts for business site

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Bangers&family=Comfortaa&family=Emblema+One&family=Luckiest+Guy&family=Nova+Flat&family=Permanent+Marker&family=Sigmar+One&family=Vujahday+Script&display=swap" rel="stylesheet">

#text #fonts

Vertical Text

// Easy Vertical Text //

@media only screen and (min-width: 640px) { em {
  width: auto !important;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-style: normal !important;
  transform: rotate(180deg);
}
}

em {
  font-style: normal !important;
}

#py #dataframe #pandas #text #exception

Exception and search text between 2 strings

import re

text = 'this is a text'

try:
    found = re.search('is(.+?)text', text).group(1)
except AttributeError:
    # AAA, ZZZ not found in the original string
    found = '0 wtitle' # apply your error handling
found

=> a

#mixin #scss #text

How to Use Mixins in Sass and Pass Arguments – With Code Examples

@mixin text($font-size,$color,$bg-color) {

     // we pass the $font-size to font-size property
    font-size: $font-size;
    
    // we pass the $color to color property
    color: $color;
    
    // we pass the $bg-color to background property
    background: $bg-color;
}



.text1 {
          // ($font-size,$color,$bg-color)
    @include text(3rem,green , black)
}

.text2 {
          // ($font-size,$color,$bg-color)
    @include text(5em,red , transparent)
}

#text #chat

inspiration

undefined

#js #javascript #text #api

Get the parts of speech for a sentence

/**
* Gets parts of speech for a sentence
* @param {String} text The text to get parts of speech for.
* @returns {Promise.<Object>} Resolves into a list of parts of speech. (Or rejects with an error)
* @example 
* var parts_of_speech  = await parts_of_speech("Sometimes I just want to code in JavaScript all day.");
* // ⇒
* // {entities: Array(1), sentiments: Array(1), documentInfo: {…}, wordFreq: Array(4), taggedText: '<span class="tag ADV">Sometimes</span> <span class…>all</span> <span class="tag DURATION">day</span>'}
function parts_of_speech(text) {
*/
function parts_of_speech(text) {
  return new Promise(async (resolve, reject) => {
    fetch("https://showcase-serverless.herokuapp.com/pos-tagger", {
      headers: {
        accept: "application/json",
        "content-type": "application/json",
      },
      body: JSON.stringify({ sentence: text }),
      method: "POST",
    })
      .then((res) => res.json())
      .then(resolve)
      .catch(reject);
  });
}

#colour #background #text

Add colour block behind text

#block-53c818fd6d3f39517aed {
background: #f0f0f0;
padding: 50px;
text-align: center;
}

#text #highlighter

Custom Highlight Behind Text

/* Text highlight underline. Only works for bolded h1 text */
h1 strong{
  background: linear-gradient(to bottom, #FFF 60%, #FFD84A 40%) !important;
  font-weight: normal !important;
 }

#highlight #low #text #header

Low Highlight on Text

h1 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
  display: inline; font-weight: normal;
}

#text

Cross-Origin Resource Sharing (CORS)

Accept: text/html
Cookie: Version=1

Vertical Text

Save snippets that work from anywhere online with our extensions

Comments

More like this

SquareSpace Styling

Browse more snippets >>

Vertical Text

Save snippets that work from anywhere online with our extensions

Comments

More like this

SquareSpace Styling

Browse more snippets >>

Embed code snippet