Is it possible to convert a text to link by its id in CSS.
<span id="text">A text</span>
Change above text by CSS to a link like this:
<span id="text">A text</span>
This is not possible to do via CSS
Links are considered content, which is separate from presentation (CSS). This is by design. Content like this can only be added to the page by modifying the DOM - either dynamically in the browser via JavaScript and/or by changing the HTML returned from server-side code.
To do specifically what you are asking for, you could use JavaScript like this...
const el = document.getElementById('text')
el.innerHTML = `${el.textContent}`
<span id="text">A text</span>
...but this is often better:
const parentElement = document.getElementById('text')
const newElement = Object.assign(document.createElement('a'), {
href: 'example.org',
textContent: parentElement.textContent
})
parentElement.textContent = ''
parentElement.appendChild(newElement)
<span id="text">A text</span>
It may look more complicated than el.innerHTML='...', but this way doesn't need to be parsed, so it is the faster approach.
If you need to manipulate HTML you can do by JavaScript but there's no way to do this with css.
Example
document.getElementById('your id').innerHTML = '';
You can find more here
Related
I'm scraping an HTML page but I'm trying to get one section of the page. There are no classes, id's or anything super useful I can plug into Cheerio I feel like (I'm new to this, so I know my ignorance plays a part).
The code looks like this.
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
<hr style="width:90%; padding: 0>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<hr style="width:90%; padding: 0>
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
Is there a way to grab the HTML between the two <hr> elements with Cheerio? Both elements are exactly the same.
You can start at the first hr and iterate next() until you get to the second one:
let el = $('hr').first()
while(el = el.next()){
if(el.length === 0 || el.prop('tagName') === 'HR') break
text += el.text() + "\n"
}
If you can ascertain which nth to use you could try nth-of-type selector e.g.
hr:nth-of-type(1)
You might also be able to use nth-child
Im embeding a word document saved as html in my site, but there are conflicts between the generated css and my site’s. What could really help me is having a “scoped” element, which is not effecting or being effected by the site itself. Is there any solution to this problem? Thanks
I personally use classes as wrappers for scoping. Below all of the styles from the word document will be "scoped" to the beginning and ending of the span tag.
/*some css wrapper class*/
.word-document-wrapper
{
}
<span class="word-document-wrapper>
<!--word document here-->
</span>
You can use HtmlSaveOptions class to specify additional options when saving a Word document into the Html, Mhtml or Epub format. For example:
Document doc = new Document("D:\\Temp\\input.docx");
HtmlSaveOptions opts = new HtmlSaveOptions(SaveFormat.Html);
opts.CssStyleSheetType = CssStyleSheetType.Embedded;
opts.ExportImagesAsBase64 = true;
opts.ExportFontsAsBase64 = true;
opts.PrettyFormat = true;
doc.Save("D:\\temp\\18.8.html", opts);
I work with Aspose as Developer Evangelist.
Super, super new to Ember, so apologies if this is straight forward. I want to know the best way to dynamically change properties in a CSS class rendered within a component.
I made a component, like so:
//route_template.hbs
{{map-view point=model}}
And I pass through point, which has two coordinate properties: model.xCoordinate, and model.yCoordinate.
Here's my component template. You can see I am currently using this hacky inline styling to style the point location on the page:
//component_template.hbs
{{#each point as |mapPoint|}}
<i class="point-icon" style={{html-safe (concat 'left:' mapPoint.xCoordinate 'px; top:' mapPoint.yCoordinate 'px;')}}></i>
{{/each}}
I know: gross. Is there a better way to do this? Should I make a handlebars helper? An action? If someone could just point me in the general direction, I can take it from there. Thanks so much!
have a look at my answer here.
probably ember-css-properties is what you're looking for. Another option is a helper or a computed property.
A helper could offer this API:
<i class="point-icon" style={{build-css
left=(concat mapPoint.xCoordinate 'px')
top=(concat mapPoint.yCoordinate 'px')
}}></i>
or even assume px by default:
<i class="point-icon" style={{build-css
left=concat mapPoint.xCoordinate
top=concat mapPoint.yCoordinate
}}></i>
if you want to use a computed property you would do this in your template:
<i class="point-icon" style={{myComputedStyle}}></i>
and this in your style
myComputedStyle: computed('mapPoint.{xCoordinate,yCoordinate}', {
get() {
return htmlSafe(`
left: ${xCoordinate}px;
top: ${yCoordinate}px;
`);
}
}),
be careful: with all of theese (except ember-css-properties) you need to understand the implications:
If the user can manipulate mapPoint.xCoordinate or mapPoint.yCoordinate to an unexpected value you may open a security hole!
You don't need to use the concat helper in <> type elements. You can do this instead
<i class="point-icon" style="left: {{mapPoint.xCoordinate}}px; top: {{mapPoint.yCoordinate}}px;"></i>
For {{}} blocks though you'll need to use concat
{{my-component style=(concat 'left: ' mapPoint.xCoordinate 'px; top: ' mapPoint.yCoordinate 'px;')}}
Also, if I'm correct, you only need to do html safe if you have markups in your string.
See https://guides.emberjs.com/v3.1.0/templates/writing-helpers/#toc_escaping-html-content
I have a React project that shows a bunch of social media links that are just icons to their respective sites. I use icomoon fonts and whatnot to provide the icon-* classes to show the social media icons.
The error I get, understandably, is:
Anchors must have content and the content must be accessible by a screen reader
What should I do in this scenario where I don't want anything but the icon and no text? I'm not sure how to properly do this so everyone's happy.
Edit
I didn't think code was necessary since it doesn't pertain to anything really.
Here's the mapping that spits out the links. As you can see, no text. Just font-icons for whatever social media site is being linked to:
{this.props.siteInfo.social.map(function(item, i){
return <a key={i} className={`nav_item icon-${item.social_media_type}-square`} href={item.url} target="_blank" rel="noopener noreferrer"></a>
})}
Which results in:
<a key="0" class="nav_item icon-facebook-square" href="facebook.com/someprofile" target="_blank" rel="noopener noreferrer"></a>
I got the same problem and I solved it by just adding one white space
<a><i class="fa fa-phone" aria-hidden="true"></i> </a>
I found my answer here:
https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/
It seems you should add a some text that you can hide via CSS, although not with display:none; or anything of that sort. Screen readers will ignore that.
I'm not sure if this is the most current way to do things, but it does work and achieves accessibility and eslint is happy.
I encountered the same problem, solved it like this with React (same suggestion as #danielInixon
const IconLink = props => {
const { name } = props;
return <a aria-label={name} href="https://github.com/johnb8005/svg">
<i className={`fa fa-${name}`} aria-hidden="true"/>
</a>;
};
I solved it with the CSS workaround:
Add some Text.
Add some CSS:
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
That means you wrote you text in side the 'i' tag
as in
your text
instead
<a><i class="fa fa-phone" aria-hidden="true"></i> your text</a>
I had the same issues for my header design system and found a solution here:
https://github.com/gatsbyjs/gatsby/issues/20208
To clarify, here's the difference:
Before:
const ExternalButton = styled( ({ ...props}) => <a {...props} />)``
After:
const ExternalButton = styled( ({ children, ...props}) => <a {...props}{children} </ a>)
Please note that a space had to be included in the </ a> for it to render on the post. Please remove it for the functional answer
If I have the following string: John Smith, how could I use CSS to set font-weight: bold on the second word in order to achieve: John Smith.
Can this be done in pure CSS?
Update: I am retrieving user's name from the server, so in my template it is #{user.profile.name}.
Since a js solution was suggested and pure CSS isn't presently possible: Live demo (click).
Sample markup:
<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">This guy and stuff.</p>
JavaScript:
var toBold = document.getElementsByClassName('bold-second-word');
for (var i=0; i<toBold.length; ++i) {
boldSecondWord(toBold[i]);
}
function boldSecondWord(elem) {
elem.innerHTML = elem.textContent.replace(/\w+ (\w+)/, function(s, c) {
return s.replace(c, '<b>'+c+'</b>');
});
}
It cannot be done in pure CSS, sorry. But if you are willing to accept a JavaScript fix, then you might want to look into something like this:
Find the start and end index of the second word in the element's textContent.
Add contenteditable attribute to element.
Use the Selection API to select that range.
Use execCommand with the bold command.
Remove contenteditable attribute.
EDIT: (just saw your edit) I agree this is a bit too hack-y for most uses. Perhaps you'd be better off saving what the last name is as meta-data?
It seems to be impossible by using only pure CSS. However, with a bit of JS you could get there pretty easily:
const phrases = document.querySelectorAll('.bold-second-word');
for (const phrase of phrases) {
const words = phrase.innerHTML.split(' ');
words[1] = `<b>${words[1]}</b>`; // this would return the second word
phrase.innerHTML = words.join(' ');
}
<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">Aaron Kelly Jones</p>