Comments (9)
@andizer With the current css styling, it is not possible to display 200 chars. For example, the Twitter preview as pasted above contains a description of approximately 157 characters, even though 200 is the max and the description obviously is not rendered completely.
Should the height be changed, or is 2 lines the maximum?
from javascript.
@andizer We have another question. In the preview example, we can see that the description text spans two lines, and ends in ellipsis. However, the CSS docs explain that white-space: nowrap
is required for use of text-overflow: ellipsis
:
By definition, white-space: nowrap
will never wrap text to the next line.
So the question is: how is it possible that the screenshot has text wrapped over two lines, and also has ellipsis (...
)?
from javascript.
Note: Before we can look into @andizer's remarks regarding the CSS props when there is an image, the TwitterImage component needs to be created. @hwinne and I are working on that at the moment.
from javascript.
@afercia Your help would be very welcome :)
from javascript.
Correct: text-overflow: ellipsis
works only with white-space: nowrap
so it applies only to single lines. There's no way to do this in CSS other than using proprietary CSS properties, not supported in all browsers.
If you look at the markup of the example above you will notice the text is actually truncated after a certain amount of characters before it's sent to the browser: it's not done via CSS.
from javascript.
@afercia Thank you for the explanation!
It seems that the truncation issue is more complicated than foreseen. If we cannot do it in CSS, what is the best approach? We can manually implement truncation (see here for an example), but that tutorial isn't completely applicable to our situation since we do not want to truncate after a certain number of words. In our case, we want to fill the available space (two lines with a certain width) with characters, and then truncate.
from javascript.
There's no perfect solution, I guess.
It is possible to truncate after a certain amount of characters. I think @igorschoester implemented something like that for the TwitterTitle.
However, truncating at a fixed amount of characters (say 200) won't produce the same results in terms of space: for example: 200 i
take less space than 200 m
.
Re: CSS there's line-clamp
but it's not standard and only works in webkit (Chrome, Safari, Opera). See https://css-tricks.com/almanac/properties/l/line-clamp/
In the same article, they mention Clamp.js haven't tested it, seems a bit old. Also, not sure using JS for this is appropriate, I wouldn't recommend it. Anyways, adopting new npm packages should be evaluated by @atimmer :)
from javascript.
@johannadevos @afercia We have solved this in a different way for the snippet preview: https://github.com/Yoast/javascript/blob/develop/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js#L331-L357. We resize the title until it is small enough to fit on one line (two lines on mobile I think). When it was at first too large then we render ...
behind it. This is a way to approximate what Google/Twitter do.
Let's use the same method for the TwitterPreview. Because this is now duplicated, please abstract this into a generally useable higher order component that lives in @yoast/helpers
. You could also split this resizing logic from this issue and do it later, but I leave that to @IreneStr.
from javascript.
I discussed the description length a bit in the #product channel, because the Twitter docs are inconsistent, and not reflecting the reality in some regards. The conclusion is that we should go for:
summary
: 3 lines maximum. The width of each line is 357px.summary-large-image
: 2 lines maximum. The width of each line is 476px.
I've created a new issue for the resizing, because it's also needed for the already merged TwitterTitle component: #157.
from javascript.
Related Issues (20)
- Question: Why don't all content analysis bullets show HOT 1
- Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory HOT 1
- How to localize? HOT 1
- authorName is null => Cannot read property 'length' of null HOT 1
- how to implement YoastSEO in a NextJS and headless CMS project?
- SEO results are not matching with online tool https://yoast.com/research/real-time-content-analysis/ HOT 2
- Create new monorepo RC when FRO-78 has been merged (team frontend will ping you)
- Create JS monorepo RC for 14.3
- Release JS monorepo for 14.2
- Create followup JS monorepo RCs for 14.3 after receiving Frontend ping
- Create JS monorepo RC for 14.4
- Create JS monorepo release for 14.3
- Merge feature/social-metadata-preview-reactification into develop
- JS repo release for 14.4
- JS repo RC for 14.5-RC1
- Position check in single h1 assessment creates problem with other systems than Wordpress HOT 1
- Error: Callback was already called.
- Error: Can't resolve '../../premium-configuration/data/morphologyData-ar-v9.json'
- Build size very large
- eslint config package does too much
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from javascript.