Разметка: позиционирование и размеры
От: Kingofastellarwar Украина  
Дата: 13.02.15 15:18
Оценка:
уже довольно много разных ГУИ либ появилось начиная собсно с самого НТМЛ и их методы "умной" расстановки элементов отличаются
как вы думаете какой идеальный был бы набор свойств для настройки позиционирования и автоматического подстройки размеров?

или какой из существюущих вам кажется идеальным?
Я изъездил эту страну вдоль и поперек, общался с умнейшими людьми и я могу вам ручаться в том, что обработка данных является лишь причудой, мода на которую продержится не более года. (с) Эксперт, авторитет и профессионал из 1957 г.
Re: Разметка: позиционирование и размеры
От: Kingofastellarwar Украина  
Дата: 13.02.15 15:20
Оценка:
у меня тут есть задача замутить свою простую разметку, так вот я думаю какой подход выбрать, а то математики много и переделать не будет простой задачей

вот например что лучше когда контейнер выравнивает контент по горизонтали или когда сам элемент говорит как его выравнивать?
Я изъездил эту страну вдоль и поперек, общался с умнейшими людьми и я могу вам ручаться в том, что обработка данных является лишь причудой, мода на которую продержится не более года. (с) Эксперт, авторитет и профессионал из 1957 г.
Re: Разметка: позиционирование и размеры
От: btn1  
Дата: 13.02.15 16:30
Оценка:
Здравствуйте, Kingofastellarwar, Вы писали:

K>как вы думаете какой идеальный был бы набор свойств для настройки позиционирования и автоматического подстройки размеров?


Мне XAML понравился. Но там не "набор свойств", а скорее "набор расставлятелей".
Re[2]: Разметка: позиционирование и размеры
От: btn1  
Дата: 13.02.15 20:37
Оценка: +1
Здравствуйте, Kingofastellarwar, Вы писали:

K>вот например что лучше когда контейнер выравнивает контент по горизонтали или когда сам элемент говорит как его выравнивать?


Думаю, для точного ответа неплохо бы ещё больше уточнить характер выравниваемых объектов. Это фигуры? Виджеты? Разметка а-ля ХТМЛ?
Re: Разметка: позиционирование и размеры
От: c-smile Канада http://terrainformatica.com
Дата: 15.02.15 07:24
Оценка: +1
Здравствуйте, Kingofastellarwar, Вы писали:

K>или какой из существюущих вам кажется идеальным?


Идеального нет. Но что-то мне говорит что моя CSS модель в Sciter в общем-то близка к тому.

Элемент выставляет требуемую топологию как
display: inline | block | inline-block

а контейнер опредляет конкретный flow:
flow: horizontal | vertical | table | grid | horizontal-wrap ...


Тут вот саецификация: http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

Если хочется математики этого дела то вот http://constraints.cs.washington.edu/cassowary/cassowary-tr.pdf
Re: Разметка: позиционирование и размеры
От: Baudolino  
Дата: 16.02.15 09:57
Оценка:
Идеальный, на мой взгляд, вариант (живой реализации не видел):
1. Каждый объект вписан в прямоугольник известного (вычислимого размера)
2. Объекты объединяются в группы, внутри которых происходит их распределение в соответствии с выбранным алгоритмом (layout).
3. На границе описанного прямоугольника для каждого объекта определены якорные точки: по умолчанию они являются вычислимыми, но могут быть переопределены. Якорные точки обладают семантикой — их назначение задавать точку привязки данного элемента интерфейса в выбранном алгоритме расположения объектов в группе.
4. Группы являются объектами и имеют собственный описанный прямоугольник с якорными точками. Якорные точки группы могут вычисляться на основе якорных точек элементов группы.

Пример:
Объект 1 — фраза на английском языке с неразрывными пробелами "Hello, world" с внутренним отступом 0.1 em.
Якорные точки/семантика
1. середины сторон описывающего прямоугольника — алгоритм "выравнивание по центру"
2. базовая линия текста — алгоритм "выравнивание по базовой линии"
3. углы прямоугольника — алгоритм "выравнивание по границе" (top/bottom/left/right)

<text style="padding: 0.1em">Hello,&nbsp;world</text>

Объект 2 — изображение высотой 0.5 em, со смещенной на 0.5em вверх базовой линией
Якорные точки/семантика
1. середины сторон описывающего прямоугольника — алгоритм "выравнивание по центру"
2. точка, соответствующая базовой линии текста со шрифтом размера 0.5em, смещенной на 0.5em вверх — алгоритм "выравнивание по базовой линии"
3. углы прямоугольника — алгоритм "выравнивание по границе" (top/bottom/left/right)

<img src="my.svg" style="height:0.5em; anchor-baseline: -0.5em" />

Объект 3 — группа объектов 1 и 2 с алгоритмом "построчное размещение; выравнивание по левому краю; выравнивание по базовой линии", и точками вертикального выравнивания по центру, расположенными с отступом 0.3em от верхней границы объекта.
Объекты расположены относительно друг друга так, что правая точка базовой линии текста совпадает с левой точкой базовой линии изображения, если ширина позволяет разместить их на одной строке,
или так, что левый верхний угол изображения совпадает с левым нижним текста, если необходимо выполнить перенос.
1. Середины сторон описывающего прямоугольника — алгоритм "выравнивание по центру"
2. левая точка базовой линии текста и правая точка базовой линии изображения — точки базовой линии группы
3. углы прямоугольника — алгоритм "выравнивание по границе" (top/bottom/left/right)

<group style="layout: flow left baseline; anchor-center-vertical: absolute 0.3em">
<text style="padding: 0.1em">Hello,&nbsp;world</text>
<img src="my.svg" style="height:0.5em; baseline-offset-y: -0.5em" />
</group>
Re[2]: Разметка: позиционирование и размеры
От: Kingofastellarwar Украина  
Дата: 02.03.15 16:02
Оценка:
а как вот насчет такого момента, а если позиционирование задавать не контейнеру а содержимом?
ну т.е. чтобы <div align=left /> означал не то что контент будет выровнен влево, а что сам div будет в родительском контенте будет выровнен влево

проблема тут только в том , что как элементы с разным позиционированием будут заполнять пространство контейнера? возможно логика будет слишком сложной
но может уже дето такая реализация уже была испробована?

потому что чисто из практики я заметил что такой штуки сильно не хватает
Я изъездил эту страну вдоль и поперек, общался с умнейшими людьми и я могу вам ручаться в том, что обработка данных является лишь причудой, мода на которую продержится не более года. (с) Эксперт, авторитет и профессионал из 1957 г.
Re[3]: Разметка: позиционирование и размеры
От: c-smile Канада http://terrainformatica.com
Дата: 27.03.15 18:33
Оценка:
Здравствуйте, Kingofastellarwar, Вы писали:

K>а как вот насчет такого момента, а если позиционирование задавать не контейнеру а содержимом?

K>ну т.е. чтобы <div align=left /> означал не то что контент будет выровнен влево, а что сам div будет в родительском контенте будет выровнен влево

<div style="margin-right:*">

Т.е. чтобы прижать элемент к левой границе контейнера ему справа нужно приделать "пружину".

Соотв. чтобы он оказался по центру контейнера то пружины нужно приделать со всвех четырех сторон:



Рисунок из моей статьи http://www.codeproject.com/Articles/859098/Sciter-multiplatform-embeddable-HTML-CSS-scripting

K>проблема тут только в том , что как элементы с разным позиционированием будут заполнять пространство контейнера? возможно логика будет слишком сложной


В общем случае решается так http://constraints.cs.washington.edu/cassowary/cassowary-tr.pdf (я эту ссылку уже приводил)

K>но может уже дето такая реализация уже была испробована?


Ну дык Sciter же.
Re: Cassowary constraint solver
От: Mamut Швеция http://dmitriid.com
Дата: 27.03.15 21:10
Оценка:
K>или какой из существюущих вам кажется идеальным?

Идеальный не знаю, но вот это акжется хорошим: http://en.wikipedia.org/wiki/Cassowary_(software)

Реализовано Apple'ом для iOS

Для веба существует в виде JS-библиотеки от авторов собстевнно подхода: http://gridstylesheets.org/


dmitriid.comGitHubLinkedIn
Re[2]: Разметка: позиционирование и размеры
От: Sinclair Россия https://github.com/evilguest/
Дата: 07.05.15 08:10
Оценка:
Здравствуйте, Baudolino, Вы писали:

B>Идеальный, на мой взгляд, вариант (живой реализации не видел):

Сразуфтопку.
Прошу прощения за прямоту. Но дело в том, что идеального варианта не существует вообще — всегда нужно рассматривать решаемую задачу.
Вот, например, задачу вёрстки текста можно рассматривать как частный случай layout-а глифов.
Ну так вот оказывается, что банальная штука типа кернинга не позволяет абстрагировать глифы "объемлющими прямоугольниками". Надо учитывать форму глифов.
Хорошие шрифты содержат в себе kerning hints, чтобы помогать выравнивать оптическую плотность текста для различных цепочек глифов.
И тем не менее, ни один дизайнер не доверяет автоматическому кернингу в mission-critical вещах типа логотипов, слоганов, и вообще вёрстки крупного шрифта.
Расположение элементов UI страдает теми же особенностями. Расположение "круглых" объектов и расположение "квадратных" объектов требуют разных margin-ов, если хочется, чтобы интервалы были визуально одинаковыми. Дизайнеры при отрисовке графических решений пользуются всякими вспомогательными средствами типа guidelines и anchor points, а потом всё равно подправляют результат руками, в зависимости от поставленной задачи.
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Re[4]: Разметка: позиционирование и размеры
От: Kingofastellarwar Украина  
Дата: 01.06.15 15:35
Оценка:
Здравствуйте, c-smile, Вы писали:

а это либа существует в таком виде(с++) который отвязан от синтаксиса, т.е. содержит только математику и минимально необходимые структуры
Я изъездил эту страну вдоль и поперек, общался с умнейшими людьми и я могу вам ручаться в том, что обработка данных является лишь причудой, мода на которую продержится не более года. (с) Эксперт, авторитет и профессионал из 1957 г.
Re[5]: Разметка: позиционирование и размеры
От: flаt  
Дата: 01.09.15 15:36
Оценка:
Здравствуйте, Kingofastellarwar, Вы писали:

K>а это либа существует в таком виде(с++) который отвязан от синтаксиса, т.е. содержит только математику и минимально необходимые структуры

Апну, ибо на что-то такое натыкался. Пусть автор подскажет, публиковалась ли где-то реализация отдельно.
Отредактировано 01.09.2015 18:04 flаt . Предыдущая версия .
Re[6]: Разметка: позиционирование и размеры
От: Kingofastellarwar Украина  
Дата: 01.09.15 15:41
Оценка:
Здравствуйте, flаt, Вы писали:

F>Здравствуйте, Kingofastellarwar, Вы писали:


K>>а это либа существует в таком виде(с++) который отвязан от синтаксиса, т.е. содержит только математику и минимально необходимые структуры

F>Апну, ибо на что-то такое натыкался. Пусть автор подскажет, публиковалася ли где-то реализация отдельно.

я так глянул одним глазом , вроде там чисто математика есть, причем портировано под всё что тока можно
Я изъездил эту страну вдоль и поперек, общался с умнейшими людьми и я могу вам ручаться в том, что обработка данных является лишь причудой, мода на которую продержится не более года. (с) Эксперт, авторитет и профессионал из 1957 г.
Re[2]: Cassowary constraint solver
От: c-smile Канада http://terrainformatica.com
Дата: 02.10.15 17:37
Оценка: 18 (1)
Здравствуйте, Mamut, Вы писали:


K>>или какой из существюущих вам кажется идеальным?


M>Идеальный не знаю, но вот это акжется хорошим: http://en.wikipedia.org/wiki/Cassowary_(software)


M>Реализовано Apple'ом для iOS


M>Для веба существует в виде JS-библиотеки от авторов собстевнно подхода: http://gridstylesheets.org/


Это решение для общего случая. В частных случаях CSS этот solver избыточен ибо у него сложность O(N*N).

Я испоьльзую свой spring engine (ссылка из моей спецификации):

http://www.terrainformatica.com/w3/flex-layout/spring-engine.h
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.