Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перенос по слогам (https://javascript.ru/forum/misc/84303-perenos-po-slogam.html)

Сергей Ракипов 02.08.2022 13:40

Перенос по слогам
 
Я знаю что есть
Код:

   
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;

Но это работает только в мозиле и больше ни где.
Я нашел вот такую ссылку http://wiki.sawtech.ru/index.php/П...aScript_JQuery но не понимаю работает это решении или просто я что то то делаю не то.

Сергей Ракипов 02.08.2022 13:42

Там есть вот такое
Перенос по слогам JavaScript JQuery
$.fn.rusHyphenate = function () {
	var all = '[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]',
		vowel = '[аеёиоуыэюя]',
		consonant = '[бвгджзклмнпрстфхцчшщ]',
		zn = '[йъь]',
		shy = '\xAD',
		hyp = [];

	hyp[0] = new RegExp('(' + zn + ')(' + all + all + ')', 'ig');
	hyp[1] = new RegExp('(' + vowel + ')(' + vowel + all + ')', 'ig');
	hyp[2] = new RegExp('(' + vowel + consonant + ')(' + consonant + vowel + ')', 'ig');
	hyp[3] = new RegExp('(' + consonant + vowel + ')(' + consonant + vowel + ')', 'ig');
	hyp[4] = new RegExp('(' + vowel + consonant + ')(' + consonant + consonant + vowel + ')', 'ig');
	hyp[5] = new RegExp('(' + vowel + consonant + consonant + ')(' + consonant + consonant + vowel + ')', 'ig');

	return this.each(function () {
		var text = $(this).html();

		for ( var i = 0; i <= 5; ++i ) {
			text = text.replace(hyp[i], '$1' + shy + '$2');
		}
		$(this).html(text);
	});
};


$(selector).rusHyphenate();


Вариант с обработкой длины слова
Чтобы переносы были только в длинных словах

$.fn.rusHyphenate = function ( options ) {
	options = $.extend({
		maxWordLength: 15, // максимальная длина слова
	}, options);

	var all       = '[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]',
	    vowel     = '[аеёиоуыэюя]',
	    consonant = '[бвгджзклмнпрстфхцчшщ]',
	    zn        = '[йъь]',
	    shy       = '\xAD',
	    hyp       = [];

	hyp[0] = new RegExp('(' + zn + ')(' + all + all + ')', 'ig');
	hyp[1] = new RegExp('(' + vowel + ')(' + vowel + all + ')', 'ig');
	hyp[2] = new RegExp('(' + vowel + consonant + ')(' + consonant + vowel + ')', 'ig');
	hyp[3] = new RegExp('(' + consonant + vowel + ')(' + consonant + vowel + ')', 'ig');
	hyp[4] = new RegExp('(' + vowel + consonant + ')(' + consonant + consonant + vowel + ')', 'ig');
	hyp[5] = new RegExp('(' + vowel + consonant + consonant + ')(' + consonant + consonant + vowel + ')', 'ig');

	return this.each(function () {
		var text = $(this).html(),
		    res  = '';

		text = text.split(' ');

		text.forEach(function ( word, i ) {
			if( word.length > options.maxWordLength ) {
				for ( var i = 0; i <= 5; ++i ) {
					word = word.replace(hyp[i], '$1' + shy + '$2');
				}
			}


			res += word + ' '
		})

		$(this).html(res);
	});
};



$(selector).rusHyphenate({maxWordLength: 10});

ksa 02.08.2022 14:34

Сергей Ракипов, если сможешь сам расставить тег <wbr> - сможешь переносить как захочешь...

Сергей Ракипов 02.08.2022 14:52

ksa,
Ну там тире не будет и это очень много что бы все расставить, если только программа какая то есть, и как тире делать

ksa 02.08.2022 14:59

Сергей Ракипов, какую задачу решаешь?
Что там за огромный текст, который нужно еще и по слогам переносить?

Сергей Ракипов 02.08.2022 15:23

Да текста много, это вообще не вариант что бы расставлять переносы вы ручную тем более без тире.

рони 02.08.2022 16:05

Сергей Ракипов,
есть плагины на эту тему, https://github.com/mnater/Hyphenopoly
https://www.npmjs.com/package/hyphen
но как с ними работать не знаю, нужен разбирающийся человек, там и там есть поддержка русского языка.

voraa 02.08.2022 23:26

Зачем они вообще нужны? Если только очень узкая колонка.

Сергей Ракипов 03.08.2022 02:12

voraa,
Так вот в этом и проблема вот как будет при узком разрешении экрана



https://ibb.co/VWP7QXw

Сергей Ракипов 03.08.2022 03:16

рони,
Тоже не разобрался


Часовой пояс GMT +3, время: 00:26.