[css-highlight-api-1] Add i18n warning about placement of range endpoints in text (#8647)

* [css-highlight-api-1] Add i18n warning about placement of range endpoints in text.

* Update css-highlight-api-1/Overview.bs

Co-authored-by: Addison Phillips <addisonI18N@gmail.com>

Author: sanketj

css-highlight-api-1/Overview.bs

@@ -162,6 +162,13 @@ Creating Custom Highlights</h3>
 	authors can chose between using {{Range}} objects and {{StaticRange}} objects.
 	See [[#range-invalidation]] for more details about this choice and its implications.
 
+	Note: When creating {{Range}} objects for use in [=custom highlights=], it is
+	suggested that authors avoid placing [=range=] endpoints in the middle of a [=grapheme=],
+	such as when a visible unit of text is comprised of multiple [=Unicode code points=].
+	Doing so can create undesirable highlighting effects, such as highlighting only part of
+	an Indic syllable. In addition, care needs to be taken to avoid placing an endpoint
+	in the middle of a [=supplementary character=].
+
 	<xmp class="idl">
 	enum HighlightType {
 		"highlight",